CSS中的布局详解（三）：flex布局

Flex布局又名弹性布局，相比float+position布局，具有很强大的灵活性，而且目前已经得到了所有浏览器的兼容。

个人认为flex布局非常灵活好用，所以这里参考了阮一峰老师的flex教程以及NEXT课程中的文档，把flex布局的所有属性知识点自己动手实现一遍并总结。

Flex布局的使用

如果想要使用Flex布局，首先需要给容器指定Flex布局。

display: flex;
display: inline-flex; //行内元素也可使用
display: -webkit-flex //Webkit浏览器内核需要加上前缀

在使用了flex布局之后，float，clear，vertical-align将失效。

Flex布局的基本概念

flex布局中，有两个基本概念：

• 容器（flex container）
• 项目（flex item）

如图所示（图片来源网络）：

由图可见，容器中有两根主轴：

• 水平主轴（main axis）
  • 开始位置（main start）
  • 结束位置（main end）
• 垂直交叉轴（cross axis）
  • 开始位置（cross start）
  • 结束位置（cross end）

在容器中，项目默认沿着主轴排列，单个项目占据主轴空间叫做（main size），占据的交叉轴空间叫做（cross size）。

容器（flex container）的属性

容器属性有6个：

1. flex-direction

• flex-direction决定了主轴的方向，也就是item排列的方向，有4个值：

  • row（默认值）：主轴为水平方向，左端为起点

    
    
    

  • row-reverse：主轴为水平方向，右端为起点

    
    
    

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

  
  
  

• column-reverse：主轴为垂直方向，下沿为起点

  
  
  

2. flex-wrap

• flex-wrap属性是规定当一条轴线排列不下item的时候，该如何换行。（item在默认情况下是按照轴线排列成一条线），有三个值：

  • nowrap（默认值）：不换行

    
    
    

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

    
    
    

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

    
    
    

3.flex-flow

• flex-flow是前两种属性的简写方式，可以写成如下形式：

.box {
  flex-flow:  || ;
}

4. justify-content

• justify-content定义了item在主轴上的对齐方式，可能取5个值

  • flex-start（默认值）：左对齐

    
    
    

  • flex-end：右对齐

    
    
    

  • center：居中

    
    
    

  • space-between：两端对齐，项目之间间隔都相等

    
    
    

  • space-around：每个项目两侧的间隔相等。所以项目之间的间隔比项目与边框的间隔大一倍。

    
    
    

5. alien-items

alien-items定义item在交叉轴上如何对齐（此时交叉轴方向为从上至下），有5个值：

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

  
  
  

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

  
  
  

• center：交叉轴的中点对齐

  
  
  

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

  
  
  
  
  

  这里有一个问题：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

• stretch（默认值）：如果item未设置高度或者设置成auto，将占满整个容器宽度

  
  
  

6.align-content

align-content定义了多跟轴线的对齐方式，如果item只有一根轴线，该属性不起作用，有6个值：

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

  
  
  

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

  
  
  

• center：与交叉轴的中点对齐

  
  
  

• space-between：与交叉轴两端对齐，轴线之间间隔平均分布

  
  
  

• space-around：每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边框的间隔大一倍

  
  
  

• stretch（默认值）：轴线占满整个交叉轴

  
  
  

item（子元素）的属性

item的属性有6个：

• order：定义item的排列顺序，数值越小排列越靠前，默认为0。
  例如：
  将所有item的order属性设置为6、5、4、3、2、1

.item6{
    order：6
}
//以此类推

*flex-grow：定义item的放大比例，默认为0，也就是如果有剩余空间，也不放大。
例如：
设置item1的flex-grow属性为2，其余为默认值。

.item1{
    flex-grow：2;
}

• flex-shrink：定义item的缩小比例，默认为1，也就是空间不足的时候，此item会缩小。
  例如：
  给item5设置了flex-shrink属性为0，其他item皆为默认值1，在空间不足的时候，它不缩小。

.item {
    flex-shrink：0;
}

• flex-basis:定义了在分配多余空间之前，项目占据的株洲空间。然后浏览器根据这个属性来计算主轴是否有多余的空间。默认值为auto，即item本来的大小。
  例如，给item5设置flex-basis属性为100px：

.item5 {
    flex-basis：150px;
}

• flex:这个属性是前几种属性的简写，默认值为0 1 auto ，后两个可选。
  例如：

item5 {
    flex : flex: 2 2 10%;
}

• align-self：允许单个item和其他item有不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有则等同于stretch。
  和align-items类似，同样有以下几种值：
• auto
• flex-start
• flex-end
• center
• baseline
• stretch

参考资料：

• 阮一峰Flex布局教程

我的个人博客：http://chronosblog.top
我的微信公众号：runtustory

CSS布局详解系列笔记索引：

• CSS中的布局详解（一）：视觉格式化模型
• CSS中的布局详解（二）：浮动与定位
• CSS中的布局详解（三）：flex布局