初探flex布局

flex布局的相关属性可以分成两类：

1. 对 父元素 设置的属性，控制父元素内所有子元素的布局
2. 对 子元素 设置的属性，单独控制某个子元素的位置

详细属性如下:

对父元素	对子元素
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-content	flex
align-items	align-self

下面分别对以上flex属性做讨论。以下部分示例图片的DOM结构如下:

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <!-- <div class="child">4</div> -->
    <!-- <div class="child">5</div> -->
</div>
复制代码

其中 .parent 为设置 display:flex 的父元素为绿色, .child 为被布局的子元素.

2. 对 父元素 设置的属性们

对父元素设置的属性可以控制子元素整体的布局方法。

2.1 flex-direction

flex-direction 属性设置父元素中子元素的排列方向，取值为:

flex-direction: row || row-reverse || column || column-reverse
复制代码

其中 || 符号表示或。

当取值为:

• row ：以行的形式排列，一般为从左到右(==>)排列，示意图如下

  

• row-reverse ：以行的形式排列，只是方向和row反过来, 一般为从右向左(<==)排列，示意图如下

• column ：以列的形式排列，一般为从上到下排列，示意图如下

  

• column-reverse ：以列的形式排列，只是方向和column反过来, 一般为从下向上排列，示意图如下

  

2.2 flex-wrap

这个属性中包含 wrap , 顾名思义, 这是个控制子元素换行的属性, 取值为：

flex-wrap: nowrap || wrap || wrap-reverse;
复制代码

• nowrap : 不换行，而且会把子元素的宽压缩以确保不溢出父元素

  

• wrap : 会换行

  

• wrap-reverse : 换行，同时方向反过来

  

2.3 flex-flow

这是个复合属性, 是前面提到的两个属性的复合，即:

flex-flow: flex-direction flex-wrap
复制代码

例如:

• flex-flow: row-reverse nowrap
  相当于:

  flex-direction: row-reverse;
  flex-wrap: nowrap;
  复制代码

• flex-flow: row-reverse wrap
  相当于:

  flex-direction: row-reverse;
  flex-wrap: wrap;
  复制代码

2.4 justify-content

这个属性控制子元素在水平方向的对齐方式, 取值如下:

justify-content: flex-start || flex-end || center || space-between || space-around || space-evenly;
复制代码

当取值分别如下时:

• flex-start : 左对齐，从左至右排列

  

• flex-end : 右对齐，向左排列

  

• center : 居中对齐

  

• space-between : 每个子元素分散开, 只在中间的子元素之间留空白，两侧的子元素靠边贴着

  

• space-around : 子元素分散，每个子元素两侧都有相等大小的空间，但是子元素之间的空间不合并，所以子元素之间的空间是子元素和父元素之间空间的2倍，如图所示:

  

• space-evenly : 子元素之间以及子元素和父元素之间的空隙相等, 如图所示:

  

2.5 align-content

这个属性和 2.4部分的 justify-content 有些相似，不过此属性是控制垂直方向的, 取值有:

align-content: stretch || flex-start || flex-end || center || space-between || space-around || space-evenly;
复制代码

当取值分别如下时:

• flex-start : 默认值,从上到下排列:

  

• flex-end : 从下到上

  

• center : 子元素聚集到中轴线

  

• space-between :

  

• space-around :

  

• space-evenly :

  

- stretch : 顾名思义，有拉伸的意思，当元素的高度自适应时，会拉伸每个子元素的高度来把父元素填满，如图:

注意：如果给子元素指定了高度，则和默认效果 flex-start

相同。

2.6 align-items

此属性控制所有子元素在水平方向上的对齐方式，取值可为:

align-items: stretch | flex-start | flex-end | center | baseline;
复制代码

为更利于此属性的表现，分别调节子元素的高度和字体大小。 当取值分别如下时:

• flex-start : 默认值,顶部对齐:

  

• flex-end : 底部对齐

  

• center : 垂直中轴线对齐

  

• baseline : 子元素以文字基线对齐

  

  

- stretch : 和上面一样，当元素的高度自适应时，会拉伸每个子元素的高度来把父元素填满，如图:

3. 对子元素设置的属性

3.1 order

这个属性可以控制一个子元素相对于其他子元素的 前后 位置，属性值是整数，默认值是0，可以取负整数。

属性值越小，则相对于其他子元素的位置越靠前，例如对三个子元素分别设置order属性为-3,-2,-1,即

.child:first-child {
    order: -1;
}

.child:nth-child(2) {
    order: -2;
}

.child:nth-child(3) {
    order: -3;
}
复制代码

由于 -3<-2<-1 ,故第3个子元素在最前，第一个子元素在最后，如图:

在父元素设置为 flex-direction: column;

时:

3.2 flex-grow

这个属性表示元素在宽度上对于剩余空间的使用比例，取值为大于等于0的数，默认是0, 即不扩张。这听起来有些抽象，以一个图为例:

上图中父元素宽度为350px,有三个子元素在一行上， 每个子元素宽度都是100px,三个子元素共300px宽度,则父元素在这一行还剩余 350-300=50px 的主轴宽度空间没有被填满,而这50px的剩余宽度可以分配给这一行的子元素增加到子元素的宽度里。 flex-grow

属性值决定了一个子元素能拿到的这部分剩余宽度里的多少。

假设三个子元素的 flex-grow 属性分别设置为1、2、3, 则第一个元素占了总比例的 1/(1+2+3)=1/6 , 同理第二个元素占了 2/6 , 第三个元素占了 3/6 , 所以这3个子元素分别能占有 50*(1/6)px 、 50*(2/6)px 、 50*(3/6)=25px ,即宽度分别增加了以上的宽度,第3个子元素占有(增加)的宽度最多，第1个子元素增加的宽度最少,即如图:

如果所有子元素的flex取值相加的和小于1，则每个元素的值就是占剩余宽度的比例，例如三个子元素的 flex-grow 分别设置为0.1、0.2、0.3，则三个元素占有的剩余宽度分别是 0.1*50=5px 、 0.2*50=10 、 0.3*50=15px , 效果图如下:

3.3 flex-shrink

这个属性设置当父元素宽度不足时子元素的宽度收缩比例, 和上面的 flex-grow 正好相反, 但是收缩的方法和后者相同。默认值是1, 即收缩相同的宽度。为便于展示, 将子元素宽度都设置成150px, 如图:

flex-shrink 就是设置每个子元素相对于150px的收缩比例，决定每个子元素收缩多少宽度的方法和 flex-grow 相同，举两个例子,当三个子元素都设置成1时, 则每个子元素都收缩 1/3*150=50px

,如图:

三个子元素分别设置0.1、0.2、0.3,则三个子元素的宽度分别收缩15px、30px、45px，第三个子元素宽度收缩最大，效果如下:

3.4 flex-basis

这个属性设置子元素的宽度，会代替width属性，也就是说如果同时设置了width和flex-basis，则width会被忽略，以flex-basis为准。默认值是auto。

当所有子元素的宽度相加超过父元素的宽度时，所有子元素会等比例收缩，效果相当于设置所有子元素的 flex-shrink: 1; 。

3.5 flex

这是个复合属性: flex: flex-grow flex-shrink flex-basis; ,后两个参数是可选的。

3.6 align-self

这个属性控制子元素本身的对齐方式， align-self: auto | flex-start | flex-end | center | baseline | stretch; ，默认值是auto, 表示继承父元素的 align-items 的属性值。

当设置父元素的 align-items: center; 时, 对第二个子元素设置 align-item 属性, 取不同值时的效果如下:

• auto : 继承自父元素的 align-items

  

• flex-start : 对齐顶部

  

• flex-end : 对齐底部

  

• center : 中轴线对齐

  

• baseline : 基线对齐

  

• stretch : 拉伸高度以填满父元素的高度