简介
Flexbox 是一种一维的弹性盒布局模型，在布局时基于主轴和交叉轴，为为容器中的子元素提供了更好的对齐、排序和空间分配机制。其设计用于解决传统布局技术（如浮动和定位）难以处理的一些布局挑战，特别是在响应式设计方面。
特点
- 弹性伸缩：Flexbox 允许子元素根据可用空间伸缩，以达到最佳的布局效果。
- 易用性：通过简单的属性设置即可实现复杂的布局。
- 响应式：易于创建响应式设计，适应不同屏幕尺寸。
- 兼容性：现代浏览器广泛支持 Flexbox，包括 IE10+。
基本概念
- 容器：使用
display: flex或display: inline-flex的元素称为 Flex 容器。 - 项目：Flex 容器内的直接子元素称为 Flex 项目。
- 主轴：默认情况下，Flex 项目沿水平方向排列，这条轴称为主轴。
- 交叉轴：与主轴垂直的方向称为交叉轴。
- 正向/反向：主轴的方向可以是正向（默认）或反向。
使用场景
- 响应式布局：创建可以随着屏幕尺寸变化而调整的布局。
- 对齐和排序：解决传统布局技术难以处理的对齐和排序问题。
- 复杂布局：适用于需要灵活控制的复杂页面布局设计。
- 导航菜单：创建水平或垂直的导航菜单。
- 卡片布局：创建一系列均匀分布的卡片或块。
属性
- 主轴 flex-direction:
row（默认）、row-reverse、column、column-reverse;
交叉轴始终垂直于主轴。 - 是否换行 flex-wrap:
nowrap（默认）、wrap、wrap-reverse; - 简写属性 flex-flow:
flex-direction,flex-wrap; - 主轴方向对齐方式 justify-content:
flex-start（默认）、flex-end、center、space-between、space-around、space-evenly； - 交叉轴方向对齐方式 align-items:
stretch（默认）、flex-start、flex-end、center、baseline； - 多行时主轴之间的对齐方式 align-content:
stretch（默认）、flex-start、flex-end、center、space-between、space-around、space-evenly；
设置属性flex-wrap: nowrap时该属性无效。 - 单个子项的交叉轴方向对齐方式 align-self:
auto（默认）、stretch、flex-start、flex-end、center、baseline； - 增长系数 flex-grow:
<number [0, ∞]>默认值：0; - 收缩系数 flex-shrink:
<number [0, ∞]>默认值：1; - 主轴方向初始大小 flex-basis:
<'width'>默认值：auto;
flex元素会以flex-basis为基础进行增长和收缩，未显式设置时会使用元素的实际宽度。 - 简写属性 flex:
flex-grow,flex-shrink,flex-basis;
initial对应值flex: 0 1 auto；auto对应值flex: 1 1 auto；none对应值flex: 0 0 auto。
flex-grow省略时默认值为1；flex-shrink省略时默认值为1；flex-basis省略时默认值为0；例如flex: 2对应值为flex: 2 1 0。 - 显示顺序 order:
<number>默认值：0; - 行间隔 row-gap:
<length>默认值：0; - 列间隔 column-gap:
<length>默认值：0; - 简写属性 gap:
row-gap,column-gap;
