弹性盒子是 CSS3 的一种新的布局模式
CSS3 弹性盒子内容
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)两部分组成。
弹性容器通过设置 display 属性的值为 flex 或 inline‐flex将其定义为弹性容器。
弹性容器内包含了一个或者多个弹性子元素。
CSS3 弹性盒子属性
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素盒子类型 |
| flex-direction | 指定了弹性容器中子元素的排列方式 |
| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |
| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |
| flex-flow | flex-direction 和 flex-wrap 的简写 |
| order | 设置弹性盒子的子元素排列顺序 |
| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子的子元素如何分配空间 |