关于Flex布局
Flex布局（Flexible Box Layout）是CSS3中引入的一种现代的、强大的布局方式，旨在更轻松地实现复杂的页面布局。它通过将容器及其子元素的属性设置为灵活的方式来实现，使得设计者更容易实现响应式设计和适应不同屏幕尺寸的布局。
优势和应用场景：
- 响应式设计： Flex布局天生支持响应式设计，能够轻松适应不同设备和屏幕尺寸。
- 简化布局： 相较于传统的布局方式，Flex布局减少了嵌套和复杂的CSS代码，使布局更加直观和简单。
- 动态布局： Flex布局适用于动态变化的布局需求，比如面临不同尺寸的内容、动态增减的元素等。
- 水平和垂直居中： 通过justify-content和align-items属性，轻松实现元素的水平和垂直居中。
- 多列布局： Flex布局非常适用于构建多列布局，而不需要使用浮动或定位。
代码展示：
容器属性
1.flex-direction: 调整主轴方向
row/*主轴方向为水平向右*/
column/*主轴方向为竖直向下*/
row-reverse/*主轴方向为水平向左*/
column-reverse/*主轴方向是竖直向上*/
2.justify-content主要用来设置主轴方向的对齐方式
flex-start /*弹性盒子元素将向起始位置对齐*/
flex-end /*弹性盒子元素将向结束位置对齐*/
center /*弹性盒子元素将向行中间位置对齐*/
space-around /*弹性盒子元素会平均地分布在行里*/
space-between/*第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的*/
3.align-items用于调整侧轴的对齐方式
flex-start/*元素在侧轴的起始位置对齐*/
flex-end/*元素在侧轴的结束位置对齐*/
center/*元素在侧轴上居中对齐*/
stretch/*元素的高度会被拉伸到最大（不给高度时, 才拉伸）*/
4.flex-wrap属性控制flex容器是单行或者多行,默认不换行
nowrap/*不换行（默认），如果宽度溢出，会压缩子盒子的宽度*/
wrap/*当宽度不够的时候，会换行*/
wrap-reverse/*换行，方向与wrap相反，后面的元素在上面/
5.align-content用来设置多行的flex容器的排列方式
flex-start/*各行向侧轴的起始位置堆叠*/
flex-end/*各行向弹性盒容器的结束位置堆叠*/
center/*各行向弹性盒容器的中间位置堆叠*/
space-around/*各行在侧轴中平均分布*/
space-between/*第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布*/
stretch/*拉伸，不设置高度的情况下*/
项目属性
flex - grow属性
flex - grow属性定义项目的放大比例，默认为0，如果存在剩余空间，也不放大。
flex-grow: <number> (default 0)
flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
number：用数值来定义扩展比率。
flex - shrink属性
flex - shrink属性定义了项目的缩小比例，默认为1，如果空间不足，这个项目将缩小。
flex-shrink: <number> (default 1)
负值对该属性无效。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，不用缩小
flex - basis属性
flex - basis属性定义了在分配多余空间之前，项目占据着主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为，就是该项目的本来大小。
flex-basis: <length> | auto (default auto)
auto：无特定宽度值，取决于其它属性值。
length：用长度值来定义宽度。
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
order: <integer>
integer：用整数值来定义排列顺序，数值小的排在前面。可以取负值。
align - self属性
align - self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
