Flex弹性盒模型打破传统css布局方式——容器篇

Flex的核心是容器和轴，容器指父级容器和子容器，轴指主轴和交轴。

容器：

• 父级容器可以统一设置子容器的排列方式，
• 子容器可以单独设置自己的排列方式，
• 如果两者都设置了，以子容器为准

父容器：

justify-content：设置子容器沿着主轴排列

位置排列：

flex-start 起始端对齐

flex-end 末端对齐

center 居中对齐

分布排列：

space-between 首尾端到父级容边距是子容器之间边距的一半

space-around 首尾端均匀对齐分步

align-items：设置子容器如何沿着交叉轴方向分配子容器的间距

位置排列：

flex-start 起始端对齐

flex-end 末端对齐

center 居中对齐

基线排列：

baseline 所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线

拉伸排列：

stretch 子容器沿交叉轴方向的尺寸拉伸至与父容器一致

子容器：

flex：主轴上如何伸缩，flex 的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 none 关键字。子容器会按照 flex 定义的尺寸比例自动伸缩，如果取值为 none 则不伸缩

三个值连用：flex-grow flex-shink flex-basis

align-items：设置子容器如何沿着交叉轴方向分配子容器的间距

位置排列：

flex-start 起始端对齐

flex-end 末端对齐

center 居中对齐

基线排列：

baseline 所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线

拉伸排列：

stretch 子容器沿交叉轴方向的尺寸拉伸至与父容器一致

 

轴篇：https://blog.youkuaiyun.com/Gbing1228/article/details/102327316