08. Flex

Flex layout

size

<!-- flex布局需要设置在外部盒子中，区块中内容若期望布置满版，需要对子元素添加flex属性，同时可通过可通过对子元素添加order属性，改变各子元素显示顺序。-->
<style>
  .container{
    display: flex;
  }
  .container div{
    border: 1px solid #fff;
    padding: 10px;
    width: 100px;    /* 所有子元素会在同一行，该宽度设置不会起到实质作用 */
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 2;
  }
  .box-1{
    flex: 2;  /*占整体比例 2
    order: 3;
/(1+2+1)*/
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 1;
  }
</style>
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

Order

<style>
  .container{
    display: flex;
    flex-wrap: wrap;
  }
  .container div{
    border: 1px solid #fff;
    padding: 10px;
    width: 100px;    /* 此时宽度设置有效 */
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 2;
  }
  .box-1{
    flex: 2;  /*占整体比例 2
    order: 3;
/(1+2+1)*/
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 1;
  }
</style>
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

direction

<style>
  .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;  /* 按照列优先方式进行布局 */
  }
  .container div{
    border: 1px solid #fff;
    padding: 10px;
    width: 100px;    /* 此时宽度设置有效 */
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 2;
  }
  .box-1{
    flex: 2;  /*占整体比例 2
    order: 3;
/(1+2+1)*/
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 1;
  }
</style>
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

alignment1

<style>
  .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 
               flex-end
               flex-start
               space-around
               space-between
               space-evenly
    */
  }
  .container div{
    border: 1px solid #fff;
    padding: 10px;
    width: 100px;    /* 此时宽度设置有效 */
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 2;
  }
  .box-1{
    flex: 2;  /*占整体比例 2
    order: 3;
/(1+2+1)*/
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 1;
  }
</style>
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>

alignment2

<style>
  .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 
               flex-end
               flex-start
               space-around
               space-between
               space-evenly
    */
    align-items: center; /*
      次轴排列布局，取值和主轴相同（若主轴发生换行或换列，
      应使用align-content，不在采用align-items）
    */
  }
  .container div{
    border: 1px solid #fff;
    padding: 10px;
    width: 100px;    /* 此时宽度设置有效 */
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 2;
  }
  .box-1{
    flex: 2;  /*占整体比例 2
    order: 3;
/(1+2+1)*/
  }
  .box-1{
    flex: 1;  /*占整体比例 1/(1+2+1)*/
    order: 1;
  }
</style>
<div class="container">
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
</div>