什么是弹性布局？

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

这是生产中最常见的一种布局。块级盒子会直接充满空间，内联盒子无法影响宽度，宽度与内容绑定，都是不灵活的，很僵化的。弹性盒子就可以解决这些缺点。

只需要在容器上加上display:flex属性，你就可以得到一个横排的布局。

.container{
    display:flex;
}

flex元素上的属性

在flex容器中添加flex-direction可以让我们更改flex元素的排列方向。

.container{
    flex-direction: row | row-reverse | column | column-reverse;
}

上图展示了flex-direction的四个取值，分别是主轴方向从左到右，主轴方向从右到左，主轴方向从上到下，主轴方向从下到上。

justify-content属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

上图展示了justify-content的几个取值，分别是

flex-start: 元素集中在弹性布局的首部。
flex-end: 元素集中在弹性布局的尾部。
start: 元素分布在writing-mode的首部方向。
end: 元素分布在writing-mode的尾部方向。
left: 元素分布在容器的左边缘。
right: 元素分布在容器的右边缘。
center: 元素沿线居中，左边和右边的留白是一样多的。
space-between:元素均匀分布在行中，第一项在最开始，最后一项在末尾。
space-around:元素均匀分布在一行中，周围等距。请注意，视觉上的空间不相等，因为所有项目的两侧都有相等的空间。第一个元素将与容器边缘有一个单位的空间，但下一个元素之间有两个单位的空间，因为下一个元素有自己的适用间距。
space-evenly:元素的分布使得任意两个元素之间的间距（以及到边缘的空间）相等。

当父元素高度溢出时，align-items帮你确定子元素如何垂直对齐。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

上图展示了align-items的几个取值，分别是

多列布局的核心也是保持内容的一个合适宽度，维持可读性。

一般规则是：主要内容列弹性收缩（可以有最小宽度）；次要列固定宽度。

一般会用一些组件库去实现。