本文重点介绍了 容器 (flex container) 和 元素(flex items) 的所有属性，以方便查阅。
Note: Flexbox 布局适合应用程序的组件和小规模布局，而 Grid 布局则适用于更大规模的布局。
基本介绍
常规布局 基于块和内联流方向，而 flex 布局 与方向无关。flexbox 是一个完整的模块而不是单个属性，因此它涉及很多东西。其中一些设置在 容器 (flex container) 上，而有一些设置在元素 (flex items) 上。
请查看下图，解释 flex 布局背后的主要思想。
items 将会在 主轴 (main axis) 或者在 交叉轴(cross axis) 排版。
flex container
- display： 定义一个
flex容器 - flex-direction： 主轴方向 【row | row-reverse | column | column-reverse】
- flex-wrap： 是否换行 【nowrap | wrap | wrap-reverse】
- flex-flow：
flex-direction和flex-wrap的简写，默认值为row nowrap - gap: items 间的间距
- justify-content： 主轴上的对齐方式 【flex-start | flex-end | center | space-between | space-around | space-evenly】
- align-items： 交叉轴上的对齐方式 【flex-start | flex-end | center | baseline | stretch】
- align-content： 多根轴线其交叉轴的对齐方式 【flex-start | flex-end | center |stretch | space-between | space-around】
dispaly
定义一个 flex 容器 ， inline 还是 block 取决于给定的值。
.container {
display: flex; /* or inline-flex */
}
flex-direction
建立 主轴 的方向，items 将按其排列。
Flexbox 是单向布局概念。（除 wrap 之外）
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap
默认情况下，items 排在一行。flex-wrap 可使 items 换行。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(default)：不换行wrap：换行，从上到下排列wrap-reverse：换行，从下到上排列
flex-flow
flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap 。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
gap
设置元素间的间距，单位 px。这样就可以替代为各个元素设置间距的方式，而导致首尾元素出现不必要的间距。
justify-content
定义了 items 在 主轴 上的对齐方式。
当一行上的 items 不够灵活，或者说灵活但已达到其最大尺寸时，它有助于分配剩余的额外空间。
当它们 (items) 溢出行时，它还对 items 的对齐进行控制。
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start(default)： 左对齐flex-end：右对齐center：居中对齐space-between：两端对齐。边缘 item 靠两侧，其余 item 之间的间隔都相等space-around：每个 item 两侧的间隔相等。所以，item 之间的间隔比 边缘 item 与边框的间隔大一倍space-evenly：两个 items （包括边缘）之间的间隔相等。
align-items
定义 items 在 交叉轴 上的对齐方式（主轴为单根轴线）。
.container {
align-items: stretch (default) | flex-start | flex-end | center | baseline;
}
align-content
定义 items 在 交叉轴 上的对齐方式（主轴为多根轴线）。
如果项目只有一根轴线，该属性不起作用。（即：带有 flex-wrap: nowrap）
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex items
Note: 设为 Flex 布局以后，子元素的
float、clear和vertical-align属性将失效
- order： items 从小到大排序
- flex-grow： 定义 items 的放大比例。默认为 0，即如果空间存在剩余，该 item 也不放大
- flex-shrink： 定义 items 在必要时的缩小比例。默认为 1，即如果空间不足，该 item 将缩小
- flex-basis： 定义 items 在分配多余空间之前(flex-flow) 的大小。默认 auto，自身大小
- flex(推荐使用)：
flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto，后两个属性可选。 - align-self： 在交叉轴上，允许单个 item 与其他项目不一样的对齐方式。默认 auto，可覆盖 align-items 属性
- 主轴独立对齐： 在主轴上，允许单个 item 与其他项目不一样的对齐方式。【margin-(left right top bottom): auto】
order
默认情况下，items 按源顺序排列。order 属性会控制它们在 flex 容器中的排列顺序
.item {
order: <integer>; /* default is 0 */
}
flex-grow
定义 items 的放大比例。默认为 0，即如果空间存在剩余，该 item 也不放大
如果所有 items 的 flex-grow 属性都为 1，则它们将等分剩余空间（如果有的话）。如果一个 items 的 flex-grow 属性为2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
.item {
flex-grow: <number>; /* default 0 */
}
Note: 负数无效
flex-shrink
定义 items 在必要时的缩小比例。默认为 1，即如果空间不足，该 item 将缩小
.item {
flex-shrink: <number>; /* default 1 */
}
Note: 负数无效
flex-basis
定义 items 在分配多余空间之前(flex-flow) 的大小。默认 auto
.item {
flex-basis: <length> | auto; /* default auto */
}
它的值可以是长度(e.g. 20%, 5rem, etc.) 或者 关键字
-
关键字
auto，即 item 本身大小，若设置了 flex-grow 则会相应放大 -
关键字
content，依据 item 的内容调整尺寸。这个关键字尚未得到很好地支持 -
如果设置为 0，将 item 折叠到其可能的最小宽度， 若此时 item 设置了
overflow: hidden，那么其自身归零（消失）。请参考以下示例
<div class="f">
<div class="zero">This is flex-basis zero</div>
</div>
<div class="f">
<div class="auto">This is flex-basis auto</div>
</div>
.f {display:flex}
.f div {border:1px solid}
.zero {flex-basis: 0}
.auto {flex-basis: auto}
flex
flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self
在交叉轴上，允许单个 item 与其他项目不一样的对齐方式。可覆盖 align-items 属性，默认 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch 。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
主轴独立对齐
在主轴上，允许单个 item 与其他项目不一样的对齐方式。
可使用 margin-(left right top bottom): auto ，
<ul class="left-list">
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
</ul>
.left-list {
display: flex;
align-items: center;
...
li {
& + li {
margin-left: 10px;
}
&:last-child {
margin-left: auto; // 😝
}
}
}
