复习 | 彻底弄懂Flexbox之Demo篇

　　flexbox之前有接触，写项目时也用过，但也只是简单的，对其也是似懂非懂，所以今天下定决心把这个再学一遍，因为似懂非懂就是不懂

　　本文主要是的demo演示，想看flexbox语法 请移步flexbox语法

　　本文主要分两大部分：flexbox的Demo与常见的布局

　　以下demo的图片与css代码从左至右从上到下一一对应

　　flexbox的Demo

　　单元素demo四个角

　　

　　html

  <div class='box-1'>
    <span>一</span>
   </div>

　　css

       .box-1{
       /* 一个元素 */
       左上角 
       display: flex;
      /* 右上角 */
       justify-content: flex-end; 
      /* 左下角 */
       align-items: flex-end; 
      /* 右下角 */
       justify-content: flex-end;
       align-items: flex-end;
     }

　　单元素居中

　　　　       

　　html

  <div class='box-1'>
    <span>一</span>
   </div>

　　css

      .box-1{
      /* 顶部水平居中 */
       justify-content: center;
      /* 左垂直居中 */
       align-items: center;
      /* 右垂直居中 */
       justify-content: flex-end;
       align-items: center; 
      /* 垂直和水平居中 */
       justify-content: center;
       align-items: center; */
      /* 底部水平居中 */
       justify-content: center;
       align-items: flex-end;
      } 

　　二个元素对齐方式

　　html　

  <div class='box-1'>
    <span>一</span>
     <span>二</span>
   </div>

　　css

  　　　.box-1{
      /* 二个元素 */
       display: flex;
      /* 水平两端对齐，项目之间的间隔都相等*/
       justify-content: space-between;
      /* 左垂直两端对齐，项目之间的间隔相等  flex-direction: column ： 主轴为垂直方向，起点在上沿。*/
       flex-direction: column;
       justify-content: space-between; 
      /* 垂直居中两端对齐，项目之间的间隔相等 flex-direction: column ： 主轴为垂直方向，起点在上沿。align-items这时就代表水平方向*/
       flex-direction: column;
       justify-content: space-between;
       align-items: center; 
      /* 右垂直两端对齐，项目之间的间隔相等 */
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-end; 
      /* 水平居中两端对齐，项目之间的间隔都相等 */
       justify-content: space-between;
       align-items: center; 
      /* 底部两端对齐，项目之间的间隔都相等 */
       justify-content: space-between;
       align-items: flex-end; 
      }
      /* 两元素左对角对齐 */
      .box-1{
       justify-content: space-between; 
      }
      span:nth-child(2){
       align-self: flex-end;
    }  

　　三元素对齐

　　

　　html

  <div class='box-1'>
    <span>一</span>
     <span>二</span>
    <span>三</span>
  <div>

　　css

    .box-1{
      /* 三元素左对角对齐 */
      justify-content: space-between;
      /* 倒三角 */
      justify-content: space-between;
    }
    /* 三元素左对角对齐 */
    span:nth-child(2){
      align-self: center;
    }
    span:nth-child(3){
      align-self: flex-end;
    }   
    /* 倒三角 */
    span:nth-child(2){
      align-self: flex-end;
    }

　　13个元素换行操作

 

　　html

  <div class='box-1'>
    <span>一</span>
     <span>二</span>
    <span>三</span>
   <span>四</span>
    <span>五</span>
    <span>六</span>
    <span>七</span>
    <span>八</span>
    <span>九</span>
    <span>十</span>
    <span>十一</span>
    <span>十二</span>
    <span>十三</span>
  </div>

　　css

    .box-1{
      /* 十三元素换行操作 */
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: space-between;
    }

　　四个元素占满4个角

   

　html

  <div class="box-2">
    <div class="column">
      <span>1</span>
      <span>2</span>
    </div>
    <div class="column">
      <span>3</span>
      <span>4</span>
    </div>
  </div>

　　css

    .box-2 {
      float: left;
      width: 400px;
      height: 400px;
      border: solid 1px black;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
    .column {
      flex-basis: 100%;
      display:flex;
      justify-content: space-between;

    }
    .column span{
      display: inline-block;
      text-align: center;
      color: #fff;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #000;
    }

　　9元素水平和垂直平分容器

　　

　　html

<div class="box-3">
    <div class="row">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
    <div class="row">
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
    <div class="row">
      <span>7</span>
      <span>8</span>
      <span>9</span>
    </div>
  </div>

　　css

    .box-3 {
      width: 180px;
      height: 190px;
      border: solid 1px black;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .row{
      flex-basis: 100%;
      display: flex;
      justify-content: space-between;
      flex: 1;
    }
    .box-3 span {
      display: inline-block;
      text-align: center;
      color: #fff;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: #000;
    }

　　常见的布局

　

　　html

    <h1>网格布局</h1>
    <div class="grid grid1">
      <div class="grid-cell u-lof2" >1/2</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell u-lof3">1/3</div>
      <div class="grid-cell u-lof3">1/3</div>
      <div class="grid-cell">auto</div>
      <div class="grid-cell u-lof3">1/3</div>
      <div class="grid-cell u-lof4">1/4</div>
      <div class="grid-cell u-lof3">1/3</div>
      <div class="grid-cell">auto</div>
    </div>

　　css

  .grid {
    display: flex;
    margin:30px auto;
    width: 100%;
    text-align: center;
    border-radius:6px;
    background-color: #eee;
    box-shadow: 0 2px 10px 0 #111 ,
                insert 0 2px 0 0 #fff;
  }
  .grid .grid-cell{
    margin: 10px;
    height: 30px;
    border-radius: 5px;
    background-color: #454545;
    line-height: 30px;
    text-align: center;
    color: #fff;
  }
  .grid1 {
    display: flex;
    flex-wrap: wrap;
  }
  .grid1 .grid-cell{
    flex:1;
  }
  .grid1 .u-lof2 {
    flex:0 0 50%;
  }
  .grid1 .u-lof3{
    flex: 0 0 33.333%;
  }
  .grid1 .u-lof4{
    flex: 0 0 25%
  }

　　html

    <h1>圣杯布局</h1>
    <div class="grid holy-grid">
      <div class="header">header</div>
      <div class="content">
        <div class="nav">nav</div>
        <div class="main">main</div>
        <div class="ads">ads</div>
      </div>
      <div class="footer">footer</div>
    </div>

　　css

  .holy-grid {
    display: flex;
    flex-direction: column;
  }
  .holy-grid .header,
  .holy-grid .footer{
    flex:1;
    height: 40px;
    background-color: #676767;
    line-height: 40px;
    color: #fff;
  }
  .holy-grid .header {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }
  .holy-grid .footer {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .holy-grid .content{
    display: flex;
    flex:1;
    min-height: 300px;
    line-height: 300px;
  }
  .holy-grid .nav,
  .holy-grid .ads{
    flex: 0 0 70px;
  }
  .holy-grid .main{
    flex:1;
  }
  .holy-grid .nav {
    order: 1;
    background-color: #a1a1a1;
  }
  .holy-grid .ads {
    background-color: #d3d3d3;
  }

　　html

    <h1>悬挂式布局</h1>
    <div class="Media">
      <img src="./jr.png" alt="" class="Media-figure">
      <div class="Media-body">
        <p class="body-title">JR禁赛真正原因曝光：他向助教身上撒了一碗汤</p>
        <div class="body-content">
          腾讯体育讯（文/Brian Windhorst和Dave McMenamin，ESPN撰稿人） 北京时间3月3日，据ESPN报道，骑士后卫JR-史密斯被球队禁赛一场的原因曝光，原来是因为他向助理教练达蒙-琼斯身上撒了一碗汤。
        </div>
      </div>
    </div>

　　css

  .Media {
    display: flex;
    align-items: flex-start;

  }
  .Media-figure {
    margin-right: 1em;
    width: 200px;
    height: 100px;
  }
  .Media-body {
    border-radius: 5px;
    background-color: #eee;
    flex:1;
    height: 100px;
  }
  .Media-body .body-title{
    font-weight: bold;
    margin:0;
  }
  .Media-body .body-content {
    margin:0;
  }

　　

　　注意：设置align-items属性时必须保证容器有高度　　　

　　　　.item {flex: 1;}
　　　　.item {
   　　 　　flex-grow: 1;
   　　　　 flex-shrink: 1;
    　　　　flex-basis: 0%;
　　　　}
　　　　这两者是等价的，三者含义见flexbox语法

 　　

　　参考文献：

　　　　　　　https://codepen.io/lcc19941214/pen/vLdVNg

　　　　　　　http://www.ruanyifeng.com/blog/2015/07/flex-examples.html