flex布局小结（一）--基本概念

flex布局定义

• Flex是Flexible Box的缩写，Flexible（/ˈfleksəbl/
  adj. 有弹性的)意为”弹性布局”，用来为盒状模型提供最大的灵活性。

• 任何一个容器都可以指定为Flex布局

容器

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。

.box {
display:flex;
}

项目

容器的直接子元素为 Flex 项目（flex item），简称"项目"。

主轴

• 主轴（main axis）；
• 容器中存在的水平的一条轴，默认方向为从左向右；
• 主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
• 项目默认沿主轴方向进行排列；
• 单个项目占据的主轴空间叫main size；

交叉轴

• 交叉轴（cross axis）；
• 容器中存在的垂直的一条轴，默认方向为从上到下；
• 交叉轴的开始位置叫做cross start，结束位置叫做cross end；
• 单个项目占据的交叉轴空间叫cross size；