flex布局

1.Flex是什么

Flex布局是一种弹性盒子模型，通过使用flex容器和flex项目来创建灵活的布局。在Flex布局中，我们可以控制容器内的项目沿主轴和侧轴的排列方式、对齐方式、大小等特性，从而实现各种复杂的布局效果。

2.Flex的容器属性

isplay: 设为 flex 或 inline-flex 来创建一个Flex容器，表示该容器内部的所有项目都是Flex项目。
flex-direction: 定义Flex容器内项目沿主轴的排列方向，可选值有 row（默认，从左到右排列）、row-reverse（从右到左排列）、column（从上到下排列）、column-reverse（从下到上排列）。
flex-wrap: 定义Flex项目是否按行（默认）或按列排列，可选值有 nowrap（不换行）、wrap（自动换行）、wrap-reverse（反向换行）。
flex-flow: flex-direction 和 flex-wrap 的简写式，默认为 row nowrap。
justify-content: 定义Flex项目在容器中沿主轴的对齐方式，可选值有 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐）、space-around（均匀分布对齐）以及 space-evenly（平均分布对齐）。
align-items: 定义Flex项目在容器中沿侧轴的对齐方式，可选值有 stretch（默认，用于占满剩余空间）、flex-start（顶对齐）、flex-end（底对齐）、center（居中对齐）以及 baseline（基线对齐）。
align-content: 定义多行Flex项目在容器中沿侧轴的对齐方式，可选值与 justify-content 一样

3.项目属性

rder: 定义Flex项目的排列顺序，默认值为0，数值小的会排在前面。
flex-grow: 定义Flex项目在空间剩余时的放大比例，默认值为0，表示不放大。
flex-shrink: 定义Flex项目在空间不足时的缩小比例，默认值为1，表示缩小到最小值（不能为负数）。
flex-basis: 定义Flex项目在分配空间前的初始大小，默认值为 auto。
flex: flex-grow, flex-shrink 和 flex-basis 的简写式，默认值为 0 1 auto。
align-self: 允许Flex项目独立于容器对齐方式，可选值与 align-items 一样。

4.效果图展示