flex弹性布局基础

阮一峰的flex布局

一：flex布局

Flexible Box：弹性布局，用来为盒状模型提供最大的灵活性。

二：概念

采用flex布局的元素成为flex容器，它的所有子元素称为项目。
容器默认两根轴：水平轴和垂直的交叉轴。

三：属性

• flex-direction：决定主轴的方向。
  （flex-direction: row | row-reverse | column | column-reverse）

• flex-wrap：如果一条轴线排不下，如何换行。
  （flex-wrap: nowrap | wrap | wrap-reverse;）

• flex-flow：flex-direction+flex-wrap的简写
  （flex-flow: row nowrap）

• justify-content：项目在主轴的对齐方式。
  （justify-content: flex-start | flex-end | center | space-between | space-around;）

• align-items：项目在交叉轴上如何对齐。
  （ align-items: flex-start | flex-end | center | baseline | stretch;）

• align-content：多根轴线（交叉轴）的对齐方式，如果只有一根不起作用。
  （align-content: flex-start | flex-end | center | space-between | space-around | stretch;）

项目的属性

• order：定义了项目的排列顺序：数值越小排列越靠前，默认为0.
  （item{ order: 数字;}）

• flex-grow： 项目的放大比例。
  可用空间分配 flex-grow属性：
  

整个盒子宽度550px，1,2,3子盒子默认宽高都为100px，然后设置盒子1,2,3的flex-grow属性如下：

            .container div:nth-child(1){
                flex-grow: 0;
            }
            .container div:nth-child(2){
                flex-grow: 1;
            }
            .container div:nth-child(3){
                flex-grow: 3;
            }

减去三个盒子的宽度还剩余：550-100X3=250px;
将剩余的宽度按照 0:1:3分配宽度：第一个盒子还是保持默认设置宽度不变，第二个盒子 (原本宽度)100Px+（分配的剩余宽度）250*（1/(1+3)）px=162.5px； 同理第三个盒子变为：100+187.5=287.5px。

• flex-shrink：项目的缩小比例。
  元素动态缩小的处理：flex-shrink:
  

       .son{
           flex-shrink: 1;
           width: 100px;
           height: 100px;
           padding: 10px;
           border: 1px solid #fff;
           box-sizing: border-box;
           background-color: lawngreen;
       }
       .son:nth-child(1){
           flex-shrink: 0;
       }
       .son:nth-child(2){
           flex-shrink: 1;
       }
       .son:nth-child(3){
           flex-shrink: 3;
       }
  

算法：父盒子总宽度250px
第一个：0不缩小还是100px；
第二个：1表示缩小1/4 三个元素水平排列(默认flex-shrink:0)溢出的长度：300-250px=50 100px-50*(1/4)=87.5px
第三个元素：100px-50*(3/4)=62.5px

• flex-basis：在分配多余空间之前，项目占据的主轴空间。
  优先级大于width或height，但是max-height或min-height优先级最高。
  当主轴为X时，设置子元素的flex-basis:100px; 会覆盖掉之前的width属性；
  同理，主轴为column时，设置子元素的flex-basis:100px;会覆盖之前子元素的height属性。

• flex：flex-grow+flex-shrink+flex-basis三者组合的简写（用的多）
  有两个快捷值：auto (1 1 auto),none(0 0 auto)；
  示例： flex:1 2 100px;（后面两个值可以不写，第一个值必须写）
  等价于flex-grow:1;flex-shrink:2;flex-basis:100px;

• align-self：允许单个项目与其他项目不同的对齐方式。可覆盖align-items。
  (align-self: auto | flex-start | flex-end | center | baseline | stretch;)

另：文字也可以当成弹性布局中的元素

      footer section h4{
        flex: 0 0 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;/文字垂直居中/
        text-align: center;
    }
        <h4>我是文字</h4>

给弹性容器的子元素规定宽度或者高度（如果容器的主轴为column的话）： flex:0 0 50px; 50px表示设置子元素的高度为50px 。

绝对定位与弹性布局相互矛盾，弹性布局对相对定位没影响。