flex布局和grid布局的使用和区别

一、Flex布局

flex布局是轴线一维弹性布局

display:flex;生成一个块状的flex容器盒子

diplay:inline-flex;生成一个行内flex容器盒子

容器属性

flex-direction排列方向

属性	含义
row（默认）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
cloumn	主轴为垂直方向，起点在上沿
cloumn-reverse	主轴为垂直方向，起点在下沿

flex-wrap是否排在一条线上，默认排在一条线上

属性	含义
nowrap(默认)	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

justify-content 元素的对其方式

属性	含义
flex-start(默认)	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间间隔相等
space-around	每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

align-items 上下如何对齐

属性	含义
flex-start	交叉轴的起点对齐（上对齐）
flex-end	交叉轴的终点对齐。（底部对齐）
center	交叉轴的中点对齐 （上下居中）
baseline	项目的第一行文字的基线对齐。
stretch(默认值)	如果项目未设置高度或设为auto，将占满整个容器的高度

align-content 多根轴线的对齐方式,如果只有一根轴线，该属性不起作用。

属性	含义
flex-start	交叉轴的起点对齐（上对齐）
flex-end	交叉轴的终点对齐。（底部对齐）
center	交叉轴的中点对齐 （上下居中）
space-around	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
stretch(默认值)	轴线占满整个交叉轴

flex-sharink 默认为1，空间不足时自动收缩，如果设置为0，则不会收缩；负值无效；

flex flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 flex:1;每个占有的空间相同

align-self设置单个元素有与其他元素不一样的对齐方式

属性	含义
auto(默认值)	表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
flex-start	交叉轴的起点对齐（上对齐）
flex-end	交叉轴的终点对齐。（底部对齐）
center	交叉轴的中点对齐 （上下居中）
baseline	项目的第一行文字的基线对齐。
stretch	如果项目未设置高度或设为auto，将占满整个容器的高度

二、Grid布局

Grid布局是可以分为行和列的二维布局,比flex布局强大

display:grid;生成一个块状的grid容器盒子

diplay:inline-grid;生成一个行内grid容器盒子

注意:设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns 定义有几列以及每一列的宽度;grid-template-rows 定义有几行以及每一行的宽度;

//定义四列，每一列的宽度是80px（也可使用百分比）,每一列可自定义宽度
grid-template-columns:80px 80px 80px 80px;
grid-template-columns:25% 25% 25% 25%;

//定义四行，每一行的宽度是80px，每一行可自定义高度
grid-template-rows:80px 80px 80px 80px;
grid-template-rows:25% 25% 25% 25%;

repeat() 定义多个重复的行或者列；

//定义四列，每一列的宽度是80px（也可使用百分比）,每一列可自定义宽度
grid-template-columns:repeat(4,80px);
grid-template-columns:repeat(4,25%);

//定义四行，每一行的宽度是80px，每一行可自定义高度
grid-template-rows:repeat(4,80px);
grid-template-rows:repeat(4,25%);

auto-fill 自适单元格，让一行或者一列中尽可能的容纳更多的单元格;

除了auto-fill，还有一个关键字auto-fit，两者的行为基本是相同的。只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，才会有行为差异：auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。

display: grid; 
grid-template-columns: repeat(auto-fill, 80px);
 grid-gap: 8px;

fr 按比例分配宽度，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

display: grid; 
grid-template-columns: 1fr 2fr 2fr 2fr;
//也可搭配定值宽度使用
grid-template-columns: 80px 1fr 2fr 1fr;

 grid-gap: 8px;

minmax(最小值，最大值) 可对单元格设置最大和最小宽度；minmax(20px,1fr)代表列宽不小于20px 最大不大于1fr

display: grid; 
grid-template-columns: 1fr 2fr 2fr minmax(20px,1fr);
grid-gap: 8px;

auto:自适应剩余宽度；

display: grid; 
grid-template-columns: 80px auto 80px;

grid-gap设置行列间距，grid-row-gap设置行间距，grid-column-gap设置列间距

display: grid; 
grid-template-columns: 80px auto 80px;
grid-gap: 8px 2px;
//相当于
grid-row-gap:8px;
grid-colume-gap:2px;

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

<div class="box">
        <ul>
            <li class="item1">1</li>
            <li class="item2">2</li>
            <li class="item3">3</li>
            <li class="item4">4</li>
            <li class="item5">5</li>
            <li class="item6">6</li>
            <li class="item7">7</li>
            <li class="item8">8</li>
            <li class="item9">9</li>
            <li class="item10">10</li>
        </ul>
    </div>
     .item1 {
            grid-area: item1;
        }

        .item2,
        .item3,
        .item4 {
            grid-area: item2;
        }

        .item5 {
            grid-area: item3;
        }

        .item6,
        .item7,
        .item8 {
            grid-area: item4;
        }
        .box ul {
            overflow: hidden;
            display: grid;
            grid-gap: 8px 2px;
            grid-template-columns: 80px 80px 80px 80px;
            grid-template-areas:
                "item1 item2  item2 item2"
                "item3 item4 item4 item4";
            background-color: #fff;
        }
    

grid-auto-flow 网格按顺序排列默认是row,即“先行后列”，colounm先列后行 grid-auto-flow: column dense; 先列后行并尽可能的填满空格

.box ul {
            overflow: hidden;
            display: grid;
            grid-gap: 8px 2px;
            grid-template-columns: 80px 80px 80px 80px;
            grid-template-rows: 80px 80px 80px 80px;
            grid-auto-flow: column;
           
        }

justify-items 设置单元格内容水平位置

属性	含义
start	对其单元格起始边缘
end	对其单元格结束位置
center	单元格内容居中
stretch（默认）	拉伸，占满单元格整个宽度

stretch

start

end

cneter

align-items 设置单元格内容垂直位置

属性	含义
start	对其单元格起始边缘
end	对其单元格结束位置
center	单元格内容居中
stretch（默认）	拉伸，占满单元格整个宽度

stretch

start

end

center

place-items属性是align-items属性和justify-items属性的合并简写形式。

place-items: <align-items> <justify-items>;

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。 place-content属性是align-content属性和justify-content属性的合并简写形式。

place-content: <align-content> <justify-content>

属性	含义
start	对齐容器起始边框
end	对齐容器结束边框
center	容器内居中
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-between	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
space-evenly	项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
stretch（默认）	拉伸，占满单元格整个宽度