flex布局最常用的几种样式

总结几点我在做项目的时候记不清的样式啊......

首先，大家得知道Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

注意1：父元素设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

我们常用的布局方式无非按水平方向排和垂直方向排，那么告诉这个盒子：排列方向(默认按行排row)

 flex-direction: row | row-reverse | column | column-reverse;

        .parent {
            display: flex;
            flex-direction: row ;  /*默认按行排row | row-reverse | column | column-reverse*/        
        }
        .child1 {
            width: 300px;
            height: 200px;
            background-color: #f6a623;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background-color: lemonchiffon;
        }

 

大家有没有想过，一行放不下该怎么办？于是告诉这个盒子：如何换行(默认不换行nowrap)

flex-wrap: nowrap | wrap | wrap-reverse;

  .parent {
            display: flex;
            flex-direction: row ;  
            flex-wrap: wrap;/*默认不换行nowrap | wrap | wrap-reverse*/
        }
        .child1 {
            width: 300px;
            height: 200px;
            background-color: #f6a623;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background-color: lemonchiffon;
        }

写到这，又发现水平对齐方式不是我想要的，那么告诉这个盒子：对齐方式(默认左对齐flex-start)

 justify-content: flex-start | flex-end | center | space-between | space-around;

         .parent {
            display: flex;
            flex-direction: row ; 
            flex-wrap: wrap;
            justify-content:center;        
        }
        .child1 {
            width: 300px;
            height: 200px;
            background-color: #f6a623;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background-color: lemonchiffon;
        }

 垂直对齐方式也不是我想要的 ，那么告诉这个盒子：垂直对齐方式(默认stretch：如果子元素未设置高度或设为auto，将占满整个容器的高度）

align-items: flex-start | flex-end | center | baseline | stretch;

          .parent {
            display: flex;
            flex-direction: row ;  
            flex-wrap: wrap;
            justify-content:center;
            align-items:center;
        }
        .child1 {
            width: 300px;
            height: 200px;
            background-color: #f6a623;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background-color: lemonchiffon;
        }

 现在父盒子的任务完成了，那么父盒子中的子元素有哪些属性呢？

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

flex-grow: 定义项目的放大比例，(默认为0，即如果存在剩余空间，也不放大)

flex-shrink:  定义了项目的缩小比例，(默认为1，即如果空间不足，该项目将缩小)

flex-basis: 定义了在分配多余空间之前，子元素占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。

flex:是flex-grow, flex-shrink 和 flex-basis的简写，(默认值为0 1 auto       个人这样理解flex中的0and1：0表示假 -不执行；1表示真-执行)

flex:1；表示 1 1 0%;理解为，放大，缩小，在放大缩小重新分配宽度的时候浏览器根据这个值来​计算的​​​(不管你是否设置了width值)

flex:none;  表示 0 0 auto; 理解为什么都不做，不放大，不缩小，保持本来不变

flex:auto;   表示 1 1 auto; 理解为，放大，缩小，很自由

flex:200px;   表示 1 1 200px; 理解为，放大，缩小，在放大缩小重新分配宽度的时候浏览器根据这个值来​计算的​​​(不管你是否设置了width值)

下面举个例子：

        .parent {
            display: flex;
            flex-direction: row ; 
            justify-content:flex-start;
            align-items:center;
        }
        .child1 {
            width: 300px;
            height: 200px;
            background-color: #f6a623;
            flex:1;
        }
        .child2 {
            width: 200px;
            height: 100px;
            background-color: lemonchiffon;
            flex: 300px;
        }

<div class="parent">
    <div class="child1">1</div>
    <div class="child2">2</div>
</div>

最终div1的宽度为522px;div2的宽度为822px；

浏览器是这样计算的

• 主轴上父盒子总尺寸为 1344px（100%）

• 子元素的总基准值是：0% + 300px = 300px，所以剩余空间为 1344px-300px=1044px;

• 1044px/2=522px; 所以div1的宽度 ：522px + 0% = 522px;   div2的宽度 ：522px + 300px = 822px;

总结一下：在使用flex布局的父容器中的子元素依然可以使用flex布局。在使用flex布局的时候一定要想好想要实现的布局，一步一步写，不然的话，就会陷入一片混乱之中......