模型概览

flex是一种页面布局方式，被叫做伸缩模型，它可以轻易的实现等分、垂直居中、水平居中、自动伸缩等，用盒模型做起来很麻烦的布局。

采用flex布局实现方法：

// html
    
    
     
      1
     
    
     
      2
     
    ...
    
// css.parent {    display: flex; // 块元素    display: inline-flex; // 内联元素}复制代码

采用flex布局的元素被称为flex容器，上面的div元素就是flex容器，容器中的子元素自动成为容器成员，被称为flex项目。

flex容器默认有两根轴，水平方向的主轴，垂直方向的交叉轴。

容器的属性

flex-direction      // 主轴方向flxe-wrap           // 在轴上排列的方式flex-flow           // flex-direction和flex-wrap的简写justify-content     // 主轴上如何对齐align-items         // 交叉轴上如何对齐align-content       // 多根主轴上如何对齐复制代码

flex-direction

定义主轴方向

flex-direction: row | row-reverse | column | column-reverse 可能的四个值复制代码

row(默认) 主轴水平，正方向为右

row-reverse 主轴水平，正方向为左

column 主轴垂直，正方向为下

column-reverse 主轴垂直，正方向为上

flex-wrap

定义主轴上的项目是否还行

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

nowrap(默认) 不换行，如果子项目跨度大于父容器，子项目会等比缩小以被容纳，除非子项目里有flex: none，这样子项目会溢出父容器。

wrap 换行，第一行在上

wrap-reverse 换行，第一行在下

flex-flow

flex-direction和flex-wrap的简写

flex-flow: 
    
      || 
     
      ;复制代码
     
    

默认 row nowrow

justify-content

定义主轴上的项目的分布方式

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

flex-start(默认) 与主轴起点对齐

flex-end 主轴上居中

flex-end 与主轴终点对齐

space-between 主轴两端对齐，项目间隔相等

space-around 主轴两端对齐，项目间间隔相等并且是项目与边框间隔的两倍

align-items

定义项目在交叉轴上的分布

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

flex-start(默认) 与交叉轴起点对齐

center 交叉轴上居中

flex-end 与交叉轴终点对齐

baseline 文本基线对齐

stretch 拉伸，前提是子项目没有设置高度或高度为auto，否则跟默认一样

align-content

定义多根主轴线的对齐方式，如果只有一根主轴该属性不起作用。

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

flex-start 与交叉轴顶端对齐

center 交叉轴上居中

flex-end 与交叉轴底端对齐

space-between 与交叉轴两端对齐，各轴线间间隔相等

space-around 与交叉轴两端对齐，各轴线间间隔相等且间隔是轴线与边框间距的两倍

stretch(默认) 把个轴上上项目拉伸至填满容器，前提是子项目高位auto或没设置，否则无效

项目的属性

前面说的属性都是设置在容器上的，下面就说一说项目上的属性

order           // 设置项目的排列顺序flex-grow       // 项目的放大   flex-shrink     // 项目的缩小flex-basis      // 项目的基础大小flex            // flex-basis,flex-grow,flex-shrink的简写align-self      // 设置单个项目在交叉轴上的分布复制代码

// html
    
    
     
      1
     
    
     
      2
     
    ...
    
// css.parent {    display: flex;}.child: {    order: ...;    flex: ...;    align-self: ...;}复制代码

order

定义项目的排列顺序，数值越小，排列越靠前，默认为0。

order: 
    
     复制代码
    

如果order属性相同，则按照项目的先后顺序排列，若项目没有order,则去默认值0

// html
    
    
     
    
     
    
     
    
     
    
// css....parent {    display: flex;}.child1 {    order: 4;    background-color: red;}.child2 {    background-color: yellow;}.child3 {    order: 0;    background-color: blue;}.child4 {    order: -1;    background-color: green;}复制代码

flex-grow

定义项目的放大比例，当容器空间大于项目总大小时，项目就会按照比例分割多余容器空间使自己放大，默认为0，就是即使有多余空间也不会放大。负值无效。

flex-grow: 
    
     复制代码
    

没有flex-grow

两项目 flex-grow: 1

第一个项目 flex-grow: 1第二个项目 flex-grow: 2

flex-shrink

定义项目的缩小比例，当容器空间小于项目总大小时，项目就会根据按比例缩小自身以便容器可以容纳项目。默认为1，就是默认会在空间不足时缩小项目。负值无效。

flex-shrink: 
    
     复制代码
    

flex-shrink: 0项目超出部分会溢出

flex-shrink: 1(默认)，项目等比缩小

第二个项目 flex-shrink: 2，其它 flex-shrink: 1,第二个项目缩小量是其它项目的2倍

flex-basis

定义项目在缩放之前的大小，默认值auto,即本来的大小。

flex-basis: 
    
      | auto复制代码
    

可以设置为根width和height属性一样的值。

flex

flex-grow,flex-shrink,flex-basis的简写形式。默认值0 1 auto。

该属性有两个快捷值，flex: auto即flex: 1 1 auto,flex: none即flex: 0 0 auto

align-self

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

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

除了auto,其余值都跟align-items表现形式一样。

align-self: align-end项目与交叉轴末尾对齐