复习 | 彻底弄懂Flexbox之Demo篇

Posted dirkhe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了复习 | 彻底弄懂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

 

以上是关于复习 | 彻底弄懂Flexbox之Demo篇的主要内容,如果未能解决你的问题,请参考以下文章

实战篇是时候彻底弄懂BERT模型了(建议收藏)

这一次,彻底弄懂“秒杀系统”

【web前端】十分钟彻底弄懂 flex 布局

js模块化编程之彻底弄懂CommonJS和AMD/CMD!

js模块化编程之彻底弄懂CommonJS和AMD/CMD!

[转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!