2018-06-12 CSS中的flex布局详解

前言：之前我写过的一篇博客介绍CSS常用的几种布局方式，PC端最常见的就是浮动布局和flex布局，而在移动端，由于不用顾忌IE这个业界大坑，flex布局应用的就更广泛了，多以本文就来详细的介绍一些flex布局。

---

1、先不说flex布局

首先我们回顾一下除了flex布局之外的常用布局方案：
首先是最基础的normal flow（文档流），子元素float+父元素添加clearfix类清除浮动，相对定位结合绝对定位，有时候还可以用负的margin来布局元素等等。而这些布局设定起来都相对比较复杂，要么得计算确切的位置，要么得防止浮动带来的bug。直到flex布局的出现，人们有了更好的布局解决方案。

2、flex布局的特点

• 块级布局侧重垂直方向，行内布局侧重水平方向，而flex布局就厉害了，他的布局与方向无关（或者说方向是可以改变的）
• flex布局可以实现空间的自动分配，自动对齐（恰好印证了flexible这个词，弹性，灵活）
• flex布局适用于简单的线性布局，更复杂的、多维度的布局要交给grid布局

3、flex中的基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的横轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；横轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的横轴空间叫做cross size。

4、flex container 的属性

• flex-direction：设置主轴的方向，属性有：row (水平，默认值)/ row-reverse(水平反向) / column(竖直) / column-reverse(竖直反向)
• flex-wrap：设置是否换行（默认为nowrap不换行），属性有：nowrap / wrap / wrap-reverse(换行，且第一行在下面)
• flex-flow：上面二者的简写，如：flex-flow: row wrap;
• justify-content：设置主轴的对齐方式，属性有：flex-start(默认值) / flex-end / center / space-between (两端对齐，项目之间的间隔都相等) / space-around (每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。)
• align-items：设置横轴的对齐方式，属性有：flex-start / flex-end / center / baseline(按项目的第一行文字的基线对齐) / stretch(默认值，如果项目未设置高度或设为auto，将占满整个容器的高度);
• align-content：多行/列内容对齐方式（多行中间的间隔，单行则无效），属性有：flex-start / flex-end / center / space-between / space-around / stretch

5、flex item 的属性

• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex：上面三个的缩写，默认值为0 1 auto
• order：顺序（定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负数）
• align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，属性有：auto | flex-start | flex-end | center | baseline | stretch

6、几个简单的例子

• 常见的手机页面布局（topbar + main + tabs）
  即全程不需要定位，浮动，仅用flex布局即可完成下图的布局结构，中间的部分超出有滚动条，header和footer位置固定。
  
  基本效果图

html结构

        
header
        

            
……
        
        

            
……
        
       

css关键代码（部分省略）

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
    text-align: center;
}
.container > footer > ul{
    display: flex;
    flex-direction: row;    
    justify-content: space-around;
    align-items: center;
    height: 80px;
}
.container > footer > ul > li{
    background: #666;
    width: 20%;
}

• 产品列表（ul>li*9）
  即完成父元素定宽高，内容列表依次排版的效果，不需要float，不需要特别的计算margin，仅仅依靠flex布局即可完成下图的基本布局：
  
  效果图
  
  html基本结构

    li{list$}*9

css关键代码

ul.container{
    height: 400px;
    width: 400px;
    border: 1px solid red;
    display: flex;
    flex-flow: wrap row;
    justify-content: space-between;
    align-items: center;
}
ul.container > li{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
}

• PC 页面布局（用flex写双飞翼）
  即header和footer定高，中间内容部分占满空间；内容部分，需要content先加载（即先写content代码，使用order控制其显示顺序），conten宽度自适应，left和right定宽，在使用flex布局的情况下，代码量远小于使用浮动。效果图如下：
  
  效果图
  
  html结构

    
Header
    

        
content
        
Left
        
Right
    
    
Footer
 

css关键代码

.container{
    display: flex;
    flex-direction: column;
    height: 100vh;
}
.container > header,footer{
    min-height: 80px;
    background: #aaa;
}
.container > main{
    display: flex;
    flex: 1;
}
.container > main > aside.asideLeft{
    width: 100px;
    background: #666;
    order: 1;
}
.container > main > .content{
    background: rgba(255,0,0,0.2);
    flex:1;
    order: 2;   
}
.container > main > aside.asideRight{
    width: 100px;
    background: #666;
    order: 3;
}

• 使用flex做成完美居中效果
  使用flex布局非常容易做到完美居中的效果，可以实现内部宽高自适应居中，父元素只需要三行代码：

  display:flex;
  justify-content:center;
  align-items:center;

7、其他

两个关于学习flex基本属性的小游戏：

• http://flexboxfroggy.com/#zh-cn
• http://www.flexboxdefense.com/

两位大佬关于flex更细致的介绍：

• 张鑫旭-CSS box-flex属性，然后弹性盒子模型简介
• 阮一峰-Flex 布局教程：语法篇