HTML5 CSS:Flex属性的应用

引言：Flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

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

.box{
  display: flex;
}

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

一、Flex容器的定义

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以通过设置display: flex;或display: inline-flex;来指定为Flex布局，其中display: flex;会使容器成为一个块级元素，而display: inline-flex;则使容器成为一个行内元素。

二、Flex容器的组成

容器（Flex Container）：采用Flex布局的元素，即设置了display: flex;或display: inline-flex;的元素。
项目（Flex Item）：Flex容器的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

三、Flex容器的轴

Flex容器默认存在两根轴：
- 主轴（Main Axis）：默认情况下，主轴是水平方向且从左到右。但可以通过flex-direction属性来改变主轴的方向，如设置为column则主轴变为垂直方向且从上到下。
- 交叉轴（Cross Axis）：与主轴垂直的轴，即如果主轴是水平方向，交叉轴就是垂直方向。

四、Flex容器的关键属性

flex-direction：设置主轴的方向。可选值包括row（默认值，主轴为水平方向）、column（主轴为垂直方向）、row-reverse（主轴为水平方向，但排列顺序从右到左）、column-reverse（主轴为垂直方向，但排列顺序从下到上）。
```
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
```
flex-wrap：定义Flex项目是否换行。可选值包括nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。
```
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
```
.box {
  flex-flow: <flex-direction> <flex-wrap>;
}
```
justify-content：定义项目在主轴上的对齐方式。可选值包括flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔都相等）、space-around（每个项目两侧的间隔相等）。
```
.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
```
align-items：定义项目在交叉轴上的对齐方式。适用于项目在一行中的情况。可选值包括flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（交叉轴中点对齐）、baseline（项目的第一行文字的基线对齐）、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。
```
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
```
align-content：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。适用于子元素多行的情况。可选值包括flex-start、flex-end、center、space-between、space-around、stretch（默认值，轴线占满整个交叉轴）。

五、Flex项目的关键属性

1. `order`

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。这个属性影响的是主轴上的排列顺序。使用 order 可以控制Flex项目的视觉顺序，而无需改变它们在HTML文档中的实际顺序。

.item {
  order: <integer>;
}

2. `flex-grow`

flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目为1，则前者占据的剩余空间将比其他项多一倍。

.item {
  flex-grow: <number>; /* default 0 */
}

3. `flex-shrink`

flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目为1，则空间不足时，前者不缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

4. `flex-basis`

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。它的默认值为 auto，即项目的本来大小。它可以设为跟 width 或 height 属性一样的值（取决于主轴是水平还是垂直），则项目将占据固定空间。

.item {
  flex-basis: <length> | auto; /* default auto */
}

5. `flex`

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性是可选的。该属性用于快速设置Flex项目的伸缩能力。例如，flex: 1 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. `align-self`

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。其他值包括 flex-start、flex-end、center、baseline 和 stretch，这些值的作用与 align-items 类似，但仅应用于单个项目。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

HTML5 CSS:Flex属性的应用

引言：Flex布局是什么？

一、Flex容器的定义

二、Flex容器的组成

三、Flex容器的轴

四、Flex容器的关键属性

五、Flex项目的关键属性

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self