2021-03-21

Flex 弹性布局
1.容器和项目 容器：装东西（元素）A 装了一个B元素 A就是B的容器A：父元素（容器） B：子元素（项目）2.主轴和交叉轴主轴：默认情况下，水平向右（x轴）,水平方向元素摆放位置：左、中、右。交叉轴：默认情况下，垂直向下（y轴）,垂直方向元素摆放位置：上、中、下。四、创建 Flex 弹性布局针对某个父元素使用 display:flex;过后，这个父元素自动变成容器，里面的所有子元素（项目）都默认在一行显示。当所有项目宽度之和大于容器宽度的时候，所有项目依旧在一行显示，但每个项目都自动缩小。五、是否换行显示：flex-wrap:值前提：所有项目宽度之和超过容器的宽度的时候nowrap：不换行（默认）wrap：换行wrap-reverse：换行且第一行在最下方六、水平方向justify-content:flex-star 主轴左对齐flex-end 主轴右对齐center 主轴居中对齐Space-between、space-around、space-evenly 的相同点和不同点相同点：项目和项目之间的距离是相等的。不同点：space-between：【项目和容器之间的距离为零】项目和容器之间的距离=项目和项目之间的距离0space-around：项目和容器之间的距离=项目和项目之间的距离0.5space-evenly:项目和容器之间的距离=项目和项目之间的距离*1七、项目在交叉轴上的对齐方式align-items:flex-star 交叉轴起点对齐（顶点对齐）flex-end 交叉轴中间点对齐（居中对齐）center 交叉轴终点对齐（底端对齐）