flex详解

基本概念

1. 传统布局与flex布局

传统布局：基于盒状模型， display 属性 + position属性 + float属性。（特殊布局不易实现，如垂直居中）
Flex 布局：简便完整实现各种页面布局，所有浏览器的支持

2.flex容器（父）与项目（子）

采用 Flex 布局的元素——Flex 容器（flex container），简称”容器”
它的所有子元素自动成为容器成员——称为 Flex 项目（flex item），简称”项目”

  3. 容器默认存在两根轴：

水平的主轴（main axis）主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
垂直的交叉轴（cross axis）交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex布局

.container{
  display: flex;        //容器指定flex布局
  display: inline-flex; //行内元素指定flex布局
  display: -webkit-flex;

}

注：Webkit 内核的浏览器，必须加上-webkit前缀
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效

容器的属性

flex-direction: row
flex-wrap: nowrap
flex-flow

justify-content:row nowrap
align-items:flex-start 

align-content:  

//主轴方向
flex-direction: row            //主轴左到右  
                row-reverse    //主轴右到左
                column         //主轴上到下
                column-reverse //主轴下到上

//是否换行
flex-wrap:nowrap               //每个项目在主轴均匀压缩，不换行，第一行再上面
          wrap                 //换行，第一行在上面
          wrap-reverse;        //换行，第一行在下面

//主轴方向和是否折叠
flex-flow:<flex-direction> || <flex-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      //

项目属性

order:0

flex-grow:0
flex-shrink:1
flex-basis:项目本身大小
flex：0 1 auto 

align-self:继承父元素的align-items，若没有父元素，则等同于stretch

//项目的序号，越小越在前
order:数字

//项目放大比例，为0不放大，为1的各项目等分剩余空间，为2的项目分的剩余空间是为1的项目的两倍
flex-grow:0（默认） | 1 | 2

//项目压缩比例，为1的各项目均等压缩，为0的不压缩
flex-shrink:0 | 1（默认）

//项目占据的主轴空间（main size），浏览器据此算主轴剩余空间，默认项目本身大小
flex-basis:auto（默认） | <length>

//放大、压缩、占主轴空间
flex:<flex-grow> | <flex-shrink> | <flex-basis>//快捷值：auto (1 1 auto) 和 none (0 0 auto)

//设置自己的对齐方式，可覆盖align-items。auto继承父元素的，若没父元素等同于stretch
align-self:auto
           flex-start  
           flex-end  
           center  
           baseline 
           stretch;

布局

网格布局：项目固定长宽，平均分配剩余的空间
圣杯布局： header、content、footer为主轴从上到下的每个项目，content为一个容器，left，center，right为每个项目，项目自动填充