小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

布局在网页中占据着重要的地位，在我们编写页面的时候，只有开头打好良好的布局，才能为我们接下来的编写打好更好的基础。今天我们要讲的就是弹性布局，让我们来好好熟悉他吧。

弹性布局

• 弹性布局：display:flex/inline-flex、flex系列属性

• 首先要了解弹性布局，首先要理解两个概念，轴和容器，

轴

轴：分为 主轴（mian axis）和 交叉轴（cross axis），由这两轴构成一个平面视角坐标系。

• 所有元素的排列都是如下两个轴中展开的。

• 通过 flex-direction: row | row-reverse | column | column-reverse\可以决定，其主轴的位置。

需要注意的是，交叉轴是有主轴决定的，而主轴是有flex-direction属性决定的。默认的主轴是水平方向上的。

容器

容器：分为 父容器（container)和 子容器（item）。

• 父容器可以设置子元素在主轴或者交叉轴方向上的对齐方式。

  • justify-content: 设置子元素在主轴方向上的对齐方式，有flex-stat、flex-end、center、space-between和space-around这几个属性。

  • align-items： 设置子元素在交叉轴方向上的对齐方式，有flex-stat、flex-end、center、baseline和stretch这几个属性。

好，今天就到这里了，今天努力的你依然是最棒的。Bye Bye！！！