flex布局

兼容使用

---

块元素使用flex布局

div{
    display: flex;
}

行内元素使用flex布局

span{
    display: inline-flex;
}

Webkit内核的浏览器使用flex布局（Safari）

div{
    display: -webkit-flex;
}

设置flex布局后，子元素的float、clear、vertical-align属性将会失效。

基本概念

---

容器和项目

使用flex布局的元素，称为“容器”，容器中的所有子元素称为“项目”。下面会详细介绍容器和项目的属性。

主轴和交叉轴

默认情况下，容器有两根轴：水平方向的是“主轴”，从左向右。与主轴垂直交叉的轴叫做“交叉轴”，从上向下。

容器属性

---

1. flex-direction

该属性是设置主轴方向的，默认情况下是水平向右的。

div{
    display: flex;
    flex-direction: column;
}

• row（默认）：主轴在水平方向，起点在左侧

• row-reverse：水平方向，起点在右侧

• column：主轴在垂直方向，起点在上

• column-reverse：垂直方向，起点在下

2. flex-wrap

该属性定义在一条轴上如果排列不下所有子元素怎么进行换行。

div{
    flex-wrap: wrap;
}

• nowrap（默认）：不换行

• wrap：换行，第一行在上面

• wrap-reverse：换行，第一行在下面

3. flex-flow

该属性是flex-direction和flex-wrap的简写。默认就是上面两个属性的默认。

div{
    flex-flow: column || wrap;
}

4. justify-content

定义项目在主轴上的排列方式。

div{
    justify-content: space-between;
}

• flex-start（默认）：紧靠左侧，并且每个项目紧挨依次排列

• flex-end：同上，但是紧靠右侧

• center：居中

• space-between：左右两侧对齐，并且每个项目之间间隔相同。

• space-around：每个项目两侧的间隔相等

5. align-items

定义项目在交叉轴上的对齐方式。

div{
    align-items：center;
}

• flex-start：交叉轴起点对齐

• flex-end：交叉轴终点对齐

• center：居中

• baseline：项目第一行的文字基线对齐

• stretch（默认）：如果项目没有设置高度或者auto，将占满整个容器高度。

  
  
  

  baseline.png

stretch.png

align-content

该属性定义多个主轴轴线的对齐方式。如果只有一条主轴，那么该属性无效。

div{
    align-content: space-around;
}

• flex-start：靠交叉轴起点对齐

• flex-end：靠交叉轴终点对齐

• center：交叉轴中间

• space-between：交叉轴两端对齐，每条主轴之间间隔平均分配。

• space-around：每条主轴两侧的间隔相等。

• stretch：轴线占满整个交叉轴

stretch.png

项目属性

---

1. order

该属性可以设置项目的排列顺序，值越小越靠前。默认为0。

.item{
   order: 2; 
}

flex-grow

该属性定义项目的放大比例，默认为0，即使存在剩余空间也不放大。

.item{
    flex-grow: 1;
}
.item2{
    flex-grow: 2;
}

如果所有项目的该属性都是1，那么所有项目平分剩余空间，如果一个是2，剩下的都是1，那么属性为2的所占的空间是其他项目的2倍。

flex-shrink

与flex-grow相反，设置项目的缩小比例，默认为1，即如果剩余空间不足，项目将缩小。

.item{
    flex-shrink: 1;
}

如果所有项目的的该属性都是1，则空间不足时，都等比缩小。如果有一个项目该属性是0，则该项目不缩小。

负值无效

4. flex-basis

项目所占据主轴的固定空间，出去这个固定空间，剩下的空间才供上面两个属性去分配。该属性的默认值是auto，即项目本身的大小，可以想宽高一样设置固定的像素值。

item{
    flex-basis: 300px;
}

5. flex

该属性是flex-grow、flex-shrink、flex-basis的简写，默认值是0、1、auto。第一个属性必选，后面两个属性可选。

item{
    flex: 1 1 auto;
}
item2{
    flex: 1;
}

建议使用两个快捷值：auto和none。
auto等同于1 1 auto，即占满额外空间并且可缩放。
none等同于0 0 auto，即不占额外空间并且不可缩放。

6. align-self

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

div{
    align-items: flex-start;
}
item{
    align-self: flex-end;
}

align-self.png

该属性除了默认值auto之外，其他属性值都和align-items属性一致