了解flex布局和grid布局

flex布局介绍

Flexible Box 模型，通常被称为 flexbox（弹性布局），是一种一维的布局模型。

display:flex;    //块级元素
display:inline-flex;    //行内元素

flex布局支持6个容器属性：

flex-direction、flex-warp、flex-flow、justify-content、align-items、align-content

属性

flex-direction

flex容器中默认存在两条轴，主轴和交叉轴，

通过flex-direction来决定主轴的方向。

flex-direction 有四个属性 row（默认值）、row-reverse、column、column-reverse

flex-wrap

flex默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩。会自动缩小盒子宽度使其一行显示，缩小最小范围为父元素的宽度。

通过flex-wrap决定容器内项目是否可换行，属性如下：

nowrap（默认值）：不换行。

wrap：换行，第一行在上方。(把每一行看作一个新的flex容器,不影响其他行)

wrap-reverse：换行，第一行在下方。

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

flex-flow: flex-direction || flex-wrap

justify-content

定义了项目在主轴上的对齐方式,常见属性如下：

flex-start（默认值）：左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，项目之间的间隔都相等。

space-around：两个项目两侧间隔相等。

align-items

定义项目在交叉轴上如何对齐，属性如下

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content 

需要设置多行方可生效

flex-warp: warp;

主轴和交叉轴的区别

flex子元素属性

flex-basis	伸缩基准值	相当于width，但是优先级比width要高
order	显示顺序	默认值0，支持负整数值
flex-grow	放大比例	默认值0
flex-shrink	缩小比例	默认为1，设置为0空间不足时不会被压缩
align-self	纵轴方向对齐方式	可覆盖align-items  auto || flex-start   ||   flex-end  ||  center  ||  baseline  ||  stretch

 Flex 简写形式允许你把三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis

grid布局介绍

网格布局，是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列。

display：grid;     //块级元素
display：inline-grid;    //行内元素

属性

网格线

从右到左是-1 、-2、-3、...

grid-template-columns和grid-template-rows 

网格模版，网格区域一定是矩形的

grid-template-columns	设置列宽
grid-template-rows	设置行高

grid-template:（grid-template-rows）/ (grid-template-columns)

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; //fr 是剩余空间分割比例
  grid-template-rows: 100px 100px;
}
等同
.wrapper {
  display: grid;
  grid-template: 100px 100px / 1fr 1fr 1fr;
}

grid-auto-columns 和 grid-auto-rows

用于定义自动生成的列和行的尺寸

gap（间距）

grid-template-areas

定义区域

这里的 . 代表空的单元格

grid-auto-flow

布局排列方式

对齐属性

单元格对齐属性 

justify-items	设置所有单元格内容的水平位置（左中右）
align-items	设置所有单元格的垂直位置（上中下）
place-items	align-items属性和justify-items属性的合并简写形式

内容对齐属性

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

子元素属性

grid-column-start	左边框所在的垂直网格线
grid-column-end	右边框所在的垂直网格线
grid-row-start	上边框所在的水平网格线
grid-row-end	下边框所在的水平网格线

grid-column ： grid-column / grid-column-end;

grid-row: grid-row-start / grid-row-end;

justify-selt	设置单元格内容的水平位置（左中右）
align-selt	设置单元格的垂直位置（上中下）
place-selt	align-items属性和justify-items属性的合并简写形式

flex和grid布局效果区别

举例

例1

    <div class="wrapper">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
    </div>

flex

    .wrapper {
        display: flex ;
        gap: 10px;
        height: 600px;
        background-color: skyblue;
        flex-flow:  wrap;
    }
    .item {
        flex: 1;
        min-width: 300px;
        font-size: 12px;
        background: red;
    }

grid

    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(300px,1fr) ); 
        gap: 10px;
        width: 100%;
        height: 600px;
    }
    .item{
        font-size: 20px;
        background-color: red;
    }