flex和grid布局的差别

flex和grid布局的差别：

flex是一维布局，grid是二维布局也就是说grid布局可以更好的操作行和列。flex布局和grid布局是现在的主流的两种布局方式。

开起网格布局 display:grid;

实战一：用grid布局做一个简单的九宫格

html代码：

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

css代码：

.box{
    width: 1200px;
    height: 80vh;
    display: grid;  // 开启grid布局
    grid-template-columns: repeat(3,30%);   // 设置列
    grid-template-rows: repeat(3,30%);  // 设置行
    grid-column-gap: 20px; // 设置网格之间的间距
    grid-row-gap: 20px; // 设置网格之间的间距
}

.box div{
    background-color: #34ce57;
}

flex和grid布局的差别实战二：做一个常用的网站布局

html代码：

<div class="box">
    <div class="header">header</div>
    <div class="content">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

css代码：

.box {
    width: 1200px;
    height: 80vh;
    display: grid; // 开启grid布局
    grid-template-rows: 10% 80% 10%;  // 设置行数
}

.header {
    background-color: #6ac13c;
    display: grid;
    /*居中*/
    align-content: center;
    justify-content: center;
}

.content {
    /*background-color: #f1b0b7;*/
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-gap: 20px;  // 网格之间的间隔
}

.footer {
    background-color: #ffc107;
    display: grid;
    align-items: center;
    justify-content: center;
}

.left {
    background-color: #5599FF;
}

.center {
    background-color: lightgreen;
}

.right {
    background-color: orchid;
}

flex和grid布局的差别