css布局-弹性盒子

什么是弹性盒子？

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

flex模型说明

当元素表现为 flex 框时，它们沿着两个轴来布局：

• 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
• 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
• 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
• 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项（flex item）

列还是行？

弹性盒子提供了 flex-direction 这样一个属性，它可以指定主轴的方向（弹性盒子子类放置的地方）— 它默认值是 row，这使得它们在按你浏览器的默认语言方向排成一排（在英语/中文浏览器中是从左到右）。

换行

当你在布局中使用定宽或者定高的时候，可能会出现问题即处于容器中的 弹性盒子子元素会溢出，破坏了布局。在css父盒子中加入

flex-wrap: wrap

现在我们有了多行 弹性盒子— 任何溢出的元素将被移到下一行。