CSS Flex 布局总结

[felix-cao]

本文是 《CSS Flex 布局》#74 的总结

• 轴和容器是 flex 布局的核心概念
• 轴分为主轴(main axis)和从轴(cross axis)

轴

• 主轴的方向由 flex-direction 确定，row、column、row-reverse、column-reverse
• 主轴逆时针旋转90度就是从轴的方向
• 轴的起始端用 flex-start 表示， 末尾端用 flex-end 表示

容器

• 容器分为父容器(container)和子容器(item)
• 父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
• 在父容器中统一设置子容器沿主轴排列 justify-content ：flex-start, flex-end, center, space-between, space-around
• 在父容器中统一设置子容器如何沿交叉轴排列 align-items ： flex-start, flex-end, center, baseline, stretch
• 子容器都具有伸缩弹性，会自动填充剩余空间，子容器的伸缩比例由 flex 属性确定
• 单独设置子容器如何沿交叉轴排列：align-self