Flex布局

1.什么是Flex布局

Flex是Flexible Box的缩写,意为弹性布局,任何容器都可以设为弹性布局.

.box{    display:flex;    display:inline-flex;   //行内元素    display:-webkit-flex;  //Webkit内核的浏览器}

设为Flex布局以后,子元素的float、clear和vertical-align属性将失效.

2.容器属性

flex-direction

指定了内部元素是如何在flex容器中布局的,定义了主轴的方向(正方向或反方向).

语法格式:flex-direction:row | row-reverse | column | column-reverse

    
            
This is a Column-Reverse
    
    
     
      A
     
    
     
      B
     
    
     
      C
     
    
This is a Row-Reverse
    
    
     
      A
     
    
     
      B
     
    
     
      C
     
    

flex-wrap

指定flex元素单行还是多行显示.如果允许换行,该属性允许你控制行的堆叠方向.

语法格式:flex-wrap: nowrap | wrap | wrap-reverse

    
            
This is an example for flex-wrap:nowrap 
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
This is an example for flex-wrap:wrap 
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
This is an example for flex-wrap:wrap-reverse 
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    

flex-flow

是flex-direction和flex-wrap的简写.

语法格式: flex-flow: <flex-direction> || <flex-wrap>,例如:flex-flow: column-reverse wrap;

justify-content

定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间.

语法格式:justify-content: flex-start | flex-end | center | space-between | space-around;flex-start 从行首开始排列.每行第一个弹性元素与行首对齐,同时所有后续的弹性元素与前一个对齐. flex-end 从行尾开始排列.每行最后一个弹性元素与行尾对齐,其他元素将与后一个对齐.center 伸缩元素向每行中点排列.每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同. space-between 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素与行首对齐,每行最后一个元素与行尾对齐. space-around 在每行上均匀分配弹性元素.相邻元素间距离相同.每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半.

    
            
This is an example for justify-content:space-between
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
This is an example for justify-content:flex-start 
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
This is an example for justify-content:space-around 
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    

align-items

以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐.

语法格式：align-items:flex-start | flex-end | center | baseline | stretch flex-start 元素向侧轴起点对齐. flex-end 元素向侧轴终点对齐.center 侧轴中点对其.baseline 项目的第一行文字的基线对齐.stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度.

    
            
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
     
      4
     
    
     
      5
     
    
     
      6
     
    
    flex-start    flex-end    center    baseline    stretch

align-content

定义了当作为一个弹性盒子容器的属性时,浏览器如何在容器的侧轴围绕弹性盒子项目分配空间.

语法格式:align-content: flex-start | flex-end | center | space-between | space-around | stretch

    
            
    
    
     
    
     
    
     
    
     
    
     
    
     
    
    flex-start    flex-end    center    space-between    space-around    stretch

align-items与items-content的区别

`align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式.让每一个单行的容器居中而不是让整个容器居中.

align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐.`对于Flex容器里面单行的情况,align-content是不起作用的.

    
            
    
    
     
      1
     
    
     
      2
     
    

对于多行的,也就是多个cross axis的情况.

    
            
    
    
     
      1
     
    
     
      2
     
    

3.项目属性

order

元素按照order属性的值的增序进行布局.拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局.

    
            
    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
     
      4
     
    
     
      5
     
    
     
      6
     
    

flex-grow

定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大.

    
            
This is a Flex-Grow
A,C are flex-grow:1 . B is flex-grow:2 .
    
    
     
      A
     
    
     
      B
     
    
     
      C
     
    

flex-shrink

指定了 flex 元素的收缩规则.flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值.

如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小.

    
            
the width of content is 500px,  flex item is 500px.
A, C are flex-shrink:1. B is flex-shrink:2
    
    
     
      A
     
    
     
      B
     
    
     
      C
     
    

flex-basis

指定了 flex 元素在主轴方向上的初始大小.如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小.

flex

规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间,flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选.

语法格式: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]其中auto (1 1 auto) 和 none (0 0 auto).

    
            
    
    
     
      auto
     
    
     
      auto
     
    
     
      auto
     
    
    
    
     
      auto
     
    
     
      initial
     
    
     
      initial
     
    
    
    
     
      auto
     
    
     
      auto
     
    
     
      none
     
    
    
    
     
      initial
     
    
     
      none
     
    
     
      none
     
    
    
    
     
      4
     
    
     
      2
     
    
     
      1
     
    
    
    
     
      Flex box (click to toggle raw box)
     
    
     
      Raw box
     
    

auto 元素会根据自身的宽度与高度来确定尺寸,但是会自行伸长以吸收flex容器中额外的自由空间,也会缩短至自身最小尺寸以适应容器.这相当于将属性设置为 "flex: 1 1 auto".

initial 属性默认值,元素会根据自身宽高设置尺寸.它会缩短自身以适应容器,但不会伸长并吸收flex容器中的额外自由空间来适应容器.相当于将属性设置为"flex: 0 1 auto".none 元素会根据自身宽高来设置尺寸.它是完全非弹性的:既不会缩短,也不会伸长来适应flex容器,相当于将属性设置为"flex: 0 0 auto". <positive-number> 元素会被赋予一个容器中自由空间的指定占比。这相当于设置属性为"flex: <positive-number> 1 0".

align-self

定义flex子项单独在侧轴（纵轴）方向上的对齐方式.align-self 属性可重写灵活容器的 align-items 属性

语法格式:align-self: auto|stretch|center|flex-start|flex-end|baseline

    
    
  
     
      红色
     
  
     
      蓝色
     
    
     
      带有更多内容的绿色 div
     
    

参考: