弹性盒子、弹性布局

1. 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：

CSS 中提供了以下属性来实现 Flex 布局：

属性 描述
display 指定 HTML 元素的盒子类型
flex-direction 指定弹性盒子中子元素的排列方式
flex-wrap 设置当弹性盒子的子元素超出父容器时是否换行
flex-flow flex-direction 和 flex-wrap 两个属性的简写
justify-content 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式
align-items 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式
align-content 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐
order 设置弹性盒子中子元素的排列顺序
align-self 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性
flex 设置弹性盒子中子元素如何分配空间
flex-grow 设置弹性盒子的扩展比率
flex-shrink 设置弹性盒子的收缩比率
flex-basis 设置弹性盒子伸缩基准值