CSS学习笔记（flex 伸缩布局 ）

一、伸缩布局 Flex

display: flex | inline-flex;

Flexbox 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。

设置为 flex 的容器被渲染成一个块元素，而设置为 inline-flex 的容器渲染为一个行内元素。属性值决定容器是如何显示的，它的所有子元素将变成 flex 文档流，被称为伸缩项目。

Tips：被定义为伸缩项目后，CSS 的 columns 属性在伸缩容器上没有效果，同时 float、clear 和 vertical-align 属性在伸缩项目上也没有效果。

常规布局是基于块和文本流方向，而Flex 布局是基于 flex-flow，如下图所示：

主轴（main axis）：伸缩容器的主轴，伸缩项目主要沿着这条轴进行排列布局。

主轴起点（main-start）和终点(main-end)：伸缩项目放置在伸缩容器内从主轴起点向主轴终点方向。

主轴尺寸(main-size)：伸缩项目在主轴方向的宽度或高度就是主轴的尺寸，伸缩项目主要的大小属性要么是宽度属性，要么是高度属性，是由哪一个对着主轴方向决定。

侧轴（cross axis）：垂直于主轴称为侧轴。

侧轴起点（cross-s