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

前言

　　前端开发最基础的能力是根据 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>
      <div class="item">3</div>
    </div>
  </body>

　　　　a. justify-content : flex-start ，该属性设置子元素在父元素开始到结束的方向排列，即从左到右从上到下。

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

      }

　　　　b. justify-content : flex-end ，该属性设置子元素在父元素主轴结束到开始的方向排列，和 flex-start 相反，但是不改变子元素的前后顺序，相当于子元素组成的一个整体，这个整体平移到父元素主轴结束的位置。

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

　　　　c. justify-content : center，该属性设置子元素在父元素主轴中间的位置开始排列，但是不改变子元素的前后顺序，相当于子元素组成一个整体，这个整体平移到父元素中间的位置。

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

　　　　d. justify-contet : sapce-around，该属性设置每个子元素两侧的间隔相等，所以每个子元素之间的间隔要比子元素相对于父元素边框的间隔大一倍。

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

　　　　e. justify-content : space-between，该属性设置每个子元素之间的间隔相等，子元素于父元素边框之间没有间隔。

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

　　（4）algin-items 交叉轴元素对齐方式属性,最好在一条轴线的时候使用该属性。

   <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 100px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
      }
      .item1 {
        width: 70px;
        border: 1px solid black;
        background-color: pink;
      }
      .item2 {
        width: 60px;
        height: 80px;
        font-size: 18px;
        border: 1px solid black;
        background-color: pink;
        padding-top: 10px;
      }
      .item3 {
        font-size: 24px;
        width: 30px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item3">4</div>
      <div class="item1">5</div>
      <div class="item2">6</div>
    </div>
  </body>

　　　　a. align-items: flex-start;该属性设置子元素在交叉轴方向上对齐父元素的最顶部。

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

　　　　b. align-items: flex-end; 该属性设置子元素在交叉轴方向上对齐父元素的最底部

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

　　　　c. align-items: center; 该属性设置子元素在交叉轴方向上相对父元素居中

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

　　　　d. align-items: baseline; 该属性设置相对于所有子元素第一行文字的基线对齐

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

　　　　e. align-items: stretch; 该属性设置当子元素没有在交叉轴设置对应长度时候，使得子元素在交叉轴呈现拉伸效果

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

　　（5）algin-content 多条轴线时元素在交叉轴的对齐方式属性，如果项目只有一根轴线，该属性不起作用。相当于把每条主轴线看作一个整体元素，对每条轴线元素进行排列。

 <style>
      .wrap {
        margin: 150px auto;
        width: 400px;
        height: 400px;
        border: 1px solid red;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .item {
        width: 90px;
        height: 100px;
        border: 1px solid black;
        background-color: pink;
      }
    </style>
  </head>
  <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. align-content: flex-start; 多条轴线的时候，轴线元素按与交叉轴起点对齐，如图从上向下排列。

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

　　　　b. align-content: flex-end; 多条轴线的时候，轴线与交叉轴结束点对齐，如图从上向下排列，元素整体位于交叉轴结束位置。

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

　　　　c. align-content: center; 相当于把所有轴线元素看作一个整体，这个整体两侧的间隔相等，即这个整体到父元素边框两侧距离相等。

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

　　　　d. align-content: space-between; 每条轴线元素之间的间隔相等，轴线元素与父元素两端边框没有间距。

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

　　　　e. align-content: space-around; 每个轴线元素两侧的间隔相等，所以每个轴线元素之间的间隔要比轴线元素与父元素边框之间的间隔大一倍。

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

　　2.flex布局在开发中的使用以及需要注意的问题。

　　（1）当每条轴线长度相等时候

 <style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid 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>

　　轴线长度不同时，同样上面的代码就成为如下图所示：

　　（2）当每条轴线长度不相等时候会出现上面的情况，要想解决这样的问题，可以在后面补充一个占位的div，具体代码如下：

<style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: flex-start;
      }
      .wrap::after {
        content: "";
        height: 0;
        width: 30%;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid 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>

　　同样也可以通过添加隐藏占位元素的方法：

<style>
      .wrap {
        border: 1px solid red;
        width: 400px;
        height: 400px;
        margin: 100px auto;
        padding: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
      }
      .item {
        margin-top: 5px;
        width: 30%;
        height: 100px;
        border: 1px solid pink;
      }
      .hidden{
          visibility: hidden;
      }
    </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 hidden">6</div>
    </div>

总结

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

posted @ 2021-06-27 17:10 zaisy'Blog 阅读(989) 评论(0) 编辑收藏举报

刷新页面返回顶部

zaisy' Blog