这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战
flexbox定义
css布局相关,用更轻量简单的方法实现类似float,display的布局方式.
由Flex容器和Flex项目组成.
Flex容器:父元素显式设置display:flex。
Flex项目:Flex容器内的子元素
flexbox容器属性 - 元素和用途
| flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content |
|---|---|---|---|---|---|
| Flex沿着主轴（Main Axis）排列方向 | 以适合放置更多列表项目/让列表项目换行排列 | flex-direction和flex-wrap两个属性的合并 | Flex项目在Main-Axis上的对齐方式 | Flex项目在Cross-Axis对齐方式 | 控制Flex项目在Flex容器里的排列方式 |
| 此行均为默认值 row 行（水平） | nowrap (不换行排列) | row nowrap 类似这种组合 | flex-start(所有Flex项目靠Main-Axis开始边缘（左对齐）) | stretch(让所有的Flex项目高度和Flex容器高度一样) | stretch(拉伸Flex项目，让他们沿着Cross-Axis适应Flex容器可用的空间) |
| column 列（垂直） | wrap(多行排列) | -- | flex-end (所有Flex项目靠Main-Axis结束边缘（右对齐）) | flex-end | flex-start(Flex容器中顶部对齐) |
| row-reverse (行反向) | wrap-reverse(多行排列，只是方向是反的) | -- | center(所有Flex项目排在Main-Axis中间（居中对齐）) | center | flex-end(底部对齐) |
| column-reverse (列反向) | -- | -- | space-between(除了第一个和最一个Flex项目的两者间间距相同（两端对齐）) | flex-start (所有Flex项目靠Cross-Axis开始边缘（顶部对齐）) | center(Flex容器中居中对齐) |
| -- | -- | -- | space-around(让每个Flex项目具有相同的空间) | baseline(让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐) | -- |
flexbox项目属性 - 元素和用途
| order | flex-grow | flex-shrink | flex-basis | flex |
|---|---|---|---|---|
| Flex容器中重新排序 | 在容器有多余的空间如何放大（扩展） | 在没有额外空间又如何缩小 | Flex项目的初始大小 | flex-grow、flex-shrink和flex-basis三个属性的简写 |
默认值是0 | 0[不会增长,开关关闭] | 1[增长,开关打开,以适应新宽度] | auto | 0 1 auto |
| 可正 | 1[增长,开关打开,以适应新宽度] | 0[不会增长,开关关闭] | 取任何用于width属性的任何值 - %/em/rem/px | -- |
| 可负 | --- | --- | --- | -- |
