flexbox是一个完整的模块，而不是一个单一的属性。

flexbox加入了大量的属性。

• 这些属性一部分用在容器上(父元素，一般称之为 flex container)

• 而另外的一些属性是用在子元素上(一般称之为 flex items. 弹性项目)。

一些基本概念

这张图来自w3c规范。

一般情况下，flex itmes 要么沿着 main axis 布局(从主轴起点到主轴终点)，要么沿着 cross axis 布局(从侧轴起点到侧轴终点)。

• 主轴(main axis) : 弹性容器的主轴是最主要的轴，flex items会沿着这条轴被布局。

  • 有一点需要注意：主轴不一定总是水平的，他的方向由 flex-direction 属性的值来决定。(后面后细讲)

• 主轴起点(main start)和主轴终点(main end)：弹性容器中的 flex items 会从 主轴起点 开始 到主轴重点结束 布局。

• 主轴长度(main size)：flex item的宽或高就是主轴长度。到底是宽还是高，由谁沿着主轴的方向来决定。

• 侧轴(cross axis)：垂直于主轴的轴就是侧轴。侧轴的方向由主轴来决定。

• 侧轴起点(cross start )和侧轴终点(cross end)：弹性行(flex lines)从侧轴起点开始到侧轴重点结束。

• 侧轴长度(cross size)：伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度，伸缩项目的侧轴长度属性是width或height属性，由哪一个沿着着侧轴方向决定。