image.png
经典问题垂直居中：
.contanier {
display: flex;
justify-content: center;
align-items: center;
}
一.Flexbox 的三大核心概念：
- 方向 (Direction)
flex-direction - 定义了主轴的方向，决定项目是水平排列还是垂直排列。 - 主轴对齐 (Justify Content)
justify-content - 管理项目在主轴上的对齐和分布。
对齐（start，end， center）和分布（space-between，around，evenly）两种 - 交叉轴对齐 (Align Items)
align-items - 管理项目在交叉轴上的对齐方式。
总结：
display: flex; 是开启弹性布局的开关。
flex-direction 定义坐标系 (主轴是水平还是垂直)。
justify-content 沿着主轴排布元素。
align-items 沿着交叉轴对齐元素。
记住这三者的关系，可以应对绝大多数单行或单列的布局场景。
二. Flex弹性布局的本质以及严谨的数学分配规则
image.png
flex: 1意味着：flex： 1 1 0. grow: 1,shrink: 1, basis: 0 平分剩余分配空间，或者同等压缩不足的空间。
image.png
image.png
计算场景
image.png
image.png
三.实现一个三栏式布局：
image.png
image.png
image.png
四.多行模式
image.png
五.个性化设置，让子项目多一些自由
align-self和order
align-self可以突破align-items的统一设置，来实现自己特殊的个性化设置
order则是可以改变html的视觉顺序，却不改变真实Dom的顺序，在光标和屏幕阅读时会存在陷阱。
负责的使用order，（数值越小越靠前，可以为负数）
image.png
