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容器的关键属性

1. flex-direction：设置主轴的方向。可选值包括row（默认值，主轴为水平方向）、column（主轴为垂直方向）、row-reverse（主轴为水平方向，但排列顺序从右到左）、column-reverse（主轴为垂直方向，但排列顺序从下到上）。

   .box {
     flex-direction: row | row-reverse | column | column-reverse;
   }

2. flex-wrap：定义Flex项目是否换行。可选值包括nowrap（默认值，不换行）、wrap（换行，第一行在上方）、wrap-reverse（换行，第一行在下方）。

   .box{
     flex-wrap: nowrap | wrap | wrap-reverse;
   }

3.  flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

   .box {
     flex-flow:  ;
   }

4. justify-content：定义项目在主轴上的对齐方式。可选值包括flex-start（左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔都相等）、space-around（每个项目两侧的间隔相等）。

   .box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
   }

5. align-items：定义项目在交叉轴上的对齐方式。适用于项目在一行中的情况。可选值包括flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（交叉轴中点对齐）、baseline（项目的第一行文字的基线对齐）、stretch（默认值，如果项目未设置高度或设为auto，将占满整个容器的高度）。

   .box {
     align-items: flex-start | flex-end | center | baseline | stretch;
   }

6. align-content：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。适用于子元素多行的情况。可选值包括flex-start、flex-end、center、space-between、space-around、stretch（默认值，轴线占满整个交叉轴）。

五、Flex项目的关键属性

1. order

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

.item {
  order: ;
}

2. flex-grow

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

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

3. flex-shrink

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

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

4. flex-basis

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

.item {
  flex-basis:  | 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;
}