CSS flexbox 速查表（附示例）
原文发布于我的博客
CSS flexbox 无需使用浮动或定位即可更轻松地设计灵活且响应式的布局结构。
柔性容器
以下属性应用于弹性容器。
展示
它将容器转换为柔性容器（flexbox）或内联柔性容器。
- flex：此值会将容器中的元素转换为弹性项目。
弯曲方向
它指定主轴的方向。
- row：这是默认值，flex 项目将水平显示，主轴将从左到右。
- 行反转：与 相同
row，只是顺序会反转，主轴会从右到左。
- 列：弹性项目将以列（垂直）形式显示，主要方向将从上到下。
- 列反转：它与 相同
column，只是顺序会反转，主轴会从下到上。
正当内容
它用于控制元素在之后的定位方式main axis。
- 居中：此值将使所有项目居中显示。
- 间距：它会将可用空间均匀地分配到各个物品之间。
- space-around：它将使每个弹性项目在左侧和右侧拥有相同数量的空间。
- space-evenly：此值确保弹性项目之间的间距相同。
- flex-start：这是默认值，项目将位于 flex 容器的开头。
- 柔性末端：物品将放置在柔性容器的末端。
对齐项目
它用于控制项目沿cross-axis.
- 拉伸：这是默认设置，弹性项目将沿交叉轴拉伸。
- 居中：此值将使项目沿交叉轴居中。
- 弹性起始：项目将位于十字轴的起始位置。
- flex-end：物品将位于十字轴的末端。
柔性包裹
- wrap：此值会将溢出的项目换行显示。
柔性流
flex-flow 属性是同时设置 `flex-width`flex-direction和 `flex- height`flex-wrap属性的简写属性。
例如：flex-flow: column wrap;
对齐内容
它与 `flex-align-items` 的功能相同align-items，区别在于，如果空间充足，此属性会将弹性容器沿交叉轴对齐。
请注意，此属性仅在弹性容器的数量大于一个时才会生效。
- 拉伸：这是默认设置，弹性容器会拉伸以占据剩余空间。
- 居中：此值将使弹性容器沿交叉轴居中。
- flex-start：flex容器将位于十字轴的起点。
- 柔性末端：柔性容器将位于十字轴的末端。
- 间距：它将把可用空间均匀地分配到柔性容器之间。
- 周围留白：它将使每个弹性容器在左右两侧都拥有相同数量的空间。
弹性项目
以下属性应用于弹性项目。
对齐自身
该属性align-items设置所有弹性项目的默认对齐方式，align-self允许我们为单个项目覆盖此默认对齐方式。
-
自动：这是默认设置。
-
center：此值将使 flex 项目在其容器中居中。
- flex-start：弹性项目将定位在交叉轴的起点。
- flex-end：弹性项目将位于交叉轴的末端。
- 拉伸：弹性项目将沿交叉轴拉伸。
命令
order 属性控制弹性容器内子元素的显示顺序。该值必须为整数。
例如：order: -1;
弹性生长
它赋予弹性项目增长的能力。该值必须为正数。
例如：flex-grow: 1;
弹性基础
它设置了弹性基准，也就是宽度。
例如：flex-basis: 30%;
弹性收缩
它控制弹性项目如何收缩。flex-shrink:0它不会收缩flex-shrink:1，它会收缩。
例如：flex-shrink:0
弹性
我们可以简化公式flex-grow，flex-basis flex-shrink后面跟着flex它们的值。
例如：flex: 0 30% auto