Flex布局那些事儿

Flex 是什么

Flex Box全称为Flexible Box，也即弹性布局，Flexbox布局比较适合Web应用程序的一些小组件和小规模的布局，而Grid布局更适合用于一些大规模的布局。本文我们对FlexBox布局进行详细的介绍。

Flex语法

任何一个容器都可以指定为Flex布局，块元素和内联元素都可以；Webkit内核的浏览器，必须加上-webkit前缀。
块元素：.box { display : flex ;}
内联元素：.box { display : inline-flex ;}
webkit内核浏览器：

.box{ 
     display:-webkit-flex;
     display:flex;
}

! 容器设为flex布局后，子元素的float、clear、vertical-align属性将会失效
采用Flex布局的元素，称为Flex容器，它的所有子元素自动成为容器成员，称为Flex项目，简称“项目”。

Flex基本概念

如下图所示，容器默认存在两根轴：水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
基本上，Flex项目是沿着main axis（从main strat 到main end） 或沿着cross size（从cross start 到cross end）排列。

FlexBox.png

容器属性

容器共有6个属性，分别是：flex-direrction、flex-wrap、flex-flow、justify-content、align-items、align-content。

flex-direction

flex-direction属性规定主轴的方向，即容器项目的排列方向。
flex-direction有四个值：row、row-reverse、column、column-reverse。

flex-direction

row为默认值，表示主轴为水平方向，左边为起点。
row-reverse表示主轴为水平方向，右边为起点，从右至左排列。
column表示主轴为竖直方向，上边为起点，从上至下排列。
column-reverse表示主轴为竖直方向，下边为起点，从下至上排列。
代码示例：

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

flex-wrap

flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-wrap属性有三个值：no-wrap、wrap、wrap-reverse；

flex-wrap

代码示例：

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

no-wrap为默认值，表示不换行

no-wrap

wrap为表示换行，换行后第一行在上方

wrap

wrap为表示换行，换行后第一行在下方。

wrap-reverse

flex-flow

flex-flow属性是flex-direction 和 flex-wrap属性的简写形式，默认值为row no-wrap
代码示例：

.box {
  flex-flow:  || ;
}

justify-content

justify-content属性定义了属性在主轴上的对齐方式，有五个值：flex-start、flex-end、center、space-between、space-around、

justify-content

1. flex-start为默认值，为左对齐方式；
2. flex-end为右对齐方式；
3. center为居中方式；
4. space-between为两端对齐方式，项目之间的间隔相等
5. space-around每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

代码示例：

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

align-items

align-items属性定义项目在交叉轴上如何对齐，有五个值：flex-start、flex-end、center、stretch、base-line。

align-items

1. stretch为默认值，如果项目未设置高度或设为auto时，项目将占满整个容器的高度。
2. flex-start表示在交叉轴的起点对齐；
3. flex-end表示在交叉轴的终点对齐；
4. center 表示在交叉轴的中点对齐；
5. base-line表示以项目的第一行基线为准对齐；

代码示例：

.box{
    align-items : stretch | flex-start | flex-end | center | base-line
}

align-content

align-content属性定义了多跟轴线的对齐方式，如果该项目只有一根轴线，则该属性不起作用。
该属性有6个值：flex-start、flex-end、center、space-between、space-around、stretch。

align-content

2. flex-start：与交叉轴的起点对齐。
3. flex-end：与交叉轴的终点对齐。
4. center：与交叉轴的中点对齐。
5. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
6. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
7. stretch（默认值）：轴线占满整个交叉轴。
   代码示例：

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

项目属性

项目属性有6个：order、flex-grow、flex-shrink、flex-basis、flex、align-self

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order

代码示例： .item { order: ; }

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-grow

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
代码示例： .item {flex-grow: ; }

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
代码示例：

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

flex-shrink

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self

代码示例：

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

Flex应用