弹性盒子display:flex 布局详解示例

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418

---

弹性盒子FLEX布局详解示例 早期CSS布局依赖display属性+position属性+float属性。它对特殊的布局非常不方便，如垂直居中，盒子排列，水平居中，瀑布流等。于是，W3C在2009年提出了一种新的方案，即Flex方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的兼容，以后大家可以随心所欲用Flex布局。

1️⃣ 弹性布局

特点

• 主轴与交叉轴：弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。
• 弹性容器：通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。
  子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
• 主轴对齐：弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。
• 交叉轴对齐：弹性项目可以在交叉轴