此文已由作者张含会授权网易云社区发布。

欢迎访问，了解更多网易技术产品运营经验。

关于盒模型布局

如何实现两栏布局？

(表格)流式，浮动，定位

如何选择？

流式 > 浮动 > 定位

弹性盒模型FlexBox

• 容器和项目 .box .item

• 设置容器flex布局

    .box{      display: flex;          }

  // 行内元素

    .box{      display: inline-flex;  }

• 容器属性

1. flex-direction 容器内项目的排列方向（常用）

    .box {     flex-direction: row | row-reverse | column | column-reverse; }

2. flex-wrap 容器内项目换行方式

    .box{     flex-wrap: nowrap | wrap | wrap-reverse; } 注意：有些浏览器不支持

3. flex-flow 是flex-direction和flex-wrap的简写属性

1. justify-content 容器内项目的水平对其方式 （常用）

   .box {

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

   }

2. align-items 容器内项目的垂直对齐方式（常用）

    .box {     align-items: stretch | flex-start | flex-end | center | baseline ; }

3. align-content 容器内项目的垂直对齐方式，多行生效，单行不生效

    .box {     align-content: stretch | flex-start | flex-end | center | space-between | space-around ; }

所以需要记住：    flex-direction，justify-content，align-items

• 项目属性

1. order 排列顺序，越小越靠前，默认为0，可以为负数

    .item{     order: 
         
          ; }
         

2. flex-grow 扩张比例，默认为0

    .item{     flex-grow: 
         
          ; }
         

3. flex-shrink 收缩比例，默认为1

    .item{     flex-shrink: 
         
          ; }
         

4. flex-basis 分配多余空间前占据的空间

    .item {     flex-basis: auto | 
         
          ; /* default auto */ }
         

5. flex 是    flex-grow，flex-shrink，flex-basis 的简写

    .item {     flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } .item{     flex: 1; }

6. align-self 项目的对齐方式，覆盖容器align-items的值

    .item {     align-self: auto | flex-start | flex-end | center | baseline | stretch; }

项目属性要记住flex

flex-grow 和 flex-shrink如何计算？

flex-grow

对于剩余空间，按照一定的比例分配到项目，以下例子的分配过程如下：

1. 先计算剩余空间1000-200-400-200=200

2. 剩余空间被分成4份，item1占2/4，item2占1/4，item3占1/4

3. item1共占200+200x2/4=300，item2共占400+200x1/4=450，item3共占200＋200x1/4=250

    
    
             
     
      100        
      
       200        
       
        300        .box {        display: flex;        width: 1000px;        height: 300px;    }    .item{        height: 50px;    }    .item:first-child{        flex: 200px 2 1;    }    .item:nth-child(2){        flex: 400px 1 2;    }    .item:nth-child(3){        flex: 200px 1 1;    }
       
      
     
    

flex-shrink

对于溢出空间，按照一定的比例收缩到项目，以下例子的分配过程如下：

1. 计算溢出空间200+400+200-400=400

2. 注意flex-shrink是收缩比例， 是基于项目宽度的，加入item1的宽度需要收缩n的比例能满足条件，根据设置item2应该收缩2n，item2的收缩比例是n，200xn+400x2n+200xn=400，所以n=1/3(0.33)

3. item1所占的宽度为200x(1-0.33)=133.33，item2所占宽度为400x(1-2x0.33)=133.33，item3所占空间为200x(1-0.33)=133.33

注意：

如果设置item1的收缩比是1，item2的收缩比是100，item3的收缩比是1，根据公式计算收缩比例是1/1001，item2所占空间为400x(1-100x(1/1001))，约等于0，很明显，如果是0，项目内容是没办法显示的，所以项目的空间不会全部收缩，肯定会预留下项目内容所需要的最小空间，这时候的计算方式会发生变化，假设item2内容所占最小空间为20，所以item2只能收缩掉400-20=380，剩余20按比例收缩在item1和item3。

    
    
             
     
      100        
      
       200        
       
        300        .box {        display: flex;        width: 400px;        height: 300px;        box-sizing: border-box;        background: #0f0;        justify-content: space-around;    }    .item{      box-sizing: border-box;      height: 50px;        background: #f00;      color: #fff;      line-height: 50px;    }    .item:first-child{      flex: 200px 1 1;    }    .item:nth-child(2){      flex: 400px 1 2;    }    .item:nth-child(3){      flex: 200px 1 1;    }
       
      
     
    

更多网易技术、产品、运营经验分享请。

相关文章：

【推荐】 

【推荐】