丶Serendipity丶：css--flex弹性布局详解和使用

当前位置博文首页 > 丶Serendipity丶：css--flex弹性布局详解和使用

丶Serendipity丶：css--flex弹性布局详解和使用

作者：丶Serendipity丶时间：2021-06-27 18:27

前言

　　前端开发最基础的能力是根据 ui 设计稿迅速还原页面，拿到设计稿不要急于写代码，首先要对页面进行分析，对页面的整体布局有个大概的了解，然后先实现一个整体的布局，再把布局拆分成逐个小模块，逐个去实现页面效果，基于传统的 float，div+css 等布局的方法，这篇文章总结一下 flex 布局在开发中使用。

正文

　　1.flex布局属性总结

　　flex 弹性布局，首先需要给盒子设置 display:flex。下面总结一下具体的使用属性。

　　（1）flex-direction 主轴方向属性

    <style>
      .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
    <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>

　　　　a. flex-direction: row; 该属性使得子元素横向在父元素盒子最左边从左向右排列，当父盒子宽度不够时会挤压子元素的宽度。

    .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }

　　　　b. flex-direction: column; 该属性使得子元素纵向从父元素最上边从上向下排列，当父盒子的高度不够时会挤压子元素的高度。

     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
      }

　　　　c. flex-direction: row-reverse; 该属性使得子元素横向从父元素最右边从右向左排列，当父盒子宽度不够时会挤压子元素的宽度。

     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row-reverse;
      }

　　　　d. flex-direction: column-reverse; 该属性使得子元素纵向从父元素最底部从下向上排列，当父盒子高度不够时会挤压子元素的高度。

     .wrap {
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: column-reverse;
      }

　　（2）felx-wrap 换行属性。规定主轴的宽度或者高度不够时，是否换行属性。

    <style>
     .wrap {
          margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
    <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

　　　　a.flex-wrap: nowrap. 默认属性，不换行，当宽度或者高度不够出现了挤压的情况。

    .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }

　　　　b.flex-wrap: wrap.允许子元素在父元素主轴的方向上换行，例如此例从上至下换行。

       .wrap {
          margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }

　　上面的代码由于边框存在，导致宽度不够出现了换行。

　　　　c.flex-wrap: wrap-reverse.允许子元素在父元素主轴的反方向上换行，例如此例从下至上换行。

      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
      }

　　（3）justify-content 主轴元素对齐方式属性

    <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item {
        width: 100px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  <body>
    <div class="wrap">
      <div class="item">1</div>
      <div class="item">2</div>
      <

上一篇：chaney1992：入门Kubernetes - YAML文件

下一篇：没有了

立即下载 - IIS7 站长工具包