干货~从实例中带你掌握flex布局

最新推荐文章于 2025-06-21 13:47:03 发布

天然卷先生

最新推荐文章于 2025-06-21 13:47:03 发布

阅读量7k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css flex 前端

本文链接：https://blog.youkuaiyun.com/lc941015/article/details/79098933

css 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Flex布局的基础知识，包括其兼容性、语法及属性说明。并提供了多个实用案例，如带icon标题居中、左中右布局等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（一）flex布局的兼容性

既然要用这种布局，就不得不考虑它的兼容性，先上图
这里写图片描述
从图可以看到，flex布局是不支持ie8，9的，所以建议，如果要做兼容ie8的pc端项目，还是老老实实用浮动布局吧~！但是现在是H5的时代，移动端我们还是放心大胆用吧，请抛弃恶心的清除浮动！

（二）flex布局的语法

我就不分析内主轴跟交叉轴了，有点难懂，抛开这个概念，我以我的口吻来介绍flex布局的语法

.box{
    /* flex布局第一步：找到你要布局元素的父元素 */
    display:flex;
    /* 第二步：判断方向：元素是横着排还是竖着排，默认为横着排，当项目空间不够时，是否换行 */
    flex-direction: row（横向） | column（纵向）;
    flex-wrap:nowrap(默认不换行) | wrap （换行，新元素在下面一行） | wrap-reverse（换行，新元素在上面一行）
    /* 第三步：根据方向，进行布局操作,注意敲黑板啦
        当为横向时，水平布局的操作用justify-content属性，垂直方向的操作用align-items属性；
        当为纵向时，两属性的作用正好相反，水平布局的操作用align-items属性，垂直方向的操作用justify-content属性；
        以上两个属性是用的最多的属性了。
    */
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: flex-start | flex-end | center | baseline | stretch;
}

下面详解 justify-content 跟 align-items 属性：

横向布局的情况下：

justify-content: flex-start 相当于左浮动

这里写图片描述

    <style type="text/css">
    .row-left{
      display: flex;
      justify-content: flex-start;
    }
    .row{
      overflow: hidden;/*清除浮动*/
    }
    .fl{
      float: left;
    }
   </style> 
  <p>justify-content: flex-start 横向排列 左对齐类似于左浮动 </p>
  <div class="row-left">
    <div class="red item-big">
    </div>
     <div class="green item-small">
    </div>
     <div class="yellow item-normal">
    </div>
  </div>
  <p>对比图 左浮动 </p>
  <div class="row">
    <div class="red item-big fl">
    </div>
     <div class="green item-small fl">
    </div>
     <div class="yellow item-normal fl">
    </div>
  </div>

justify-content: flex-end 相当于右浮动，具体不赘述，同上
justify-content: center 让某个元素水平居中
justify-content: space-between 这个就非常好用的，两个子元素情况下，一个元素左对齐，一个元素右对齐。三个元素情况下就无敌了，能实现一个元素居中，一个元素左对齐，一个元素右对齐。放以前，中间居中的都不知道有多麻烦。

这里写图片描述

<style type="text/css">
    /* 在写此demo时发现一个问题，若一个元素同时使用定位，跟flex布局时，由于定位会脱离文档流，则宽度变成了自适应而不是100%。
    解决办法：在外层再套一层元素，用于定位 
    */
   .fixed{
      width: 100%;
      position: fixed;
      left: 0;
      bottom: 20px;
    }
    .row-between{
      margin: 0 20px;
      display: flex;
      justify-content: space-between;
    }
    .logo{
      width: 50px;
      height: 30px;
      line-height: 30px;
      background: pink;
      text-align: center;
      color:#fff;
    }
    button{
      width: 100px;
      height: 30px;
      border:1px solid pink;
      border-radius: 8px;
      background: #fff;
    }
  </style>
  <div class="fixed">
     <div class="row-between">
       <button>按钮一</button>
       <div class="logo">logo</div>
       <button>按钮二</button>
     </div>
  </div>

justify-content: space-around 每个子元素两侧的间距都相等，且为项目到边框距离的两倍。
align-items: flex-start 垂直方向的上对齐。
align-items: flex-end 垂直方向的下对齐。
align-items：center 最好用的竖直居中
例如：移动端toast提示框（垂直水平居中的）

  <style type="text/css">
    .model{
      position: absolute;
      left:0;
      top:0;
      right:0;
      bottom:0;
      background: rgba(0,0,0,0.6);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .toast{
      min-width: 100px;
      min-height: 50px;
      line-height: 50px;
      text-align: center;
      background: #fff;
      border-radius: 8px;
      color:#333;
      font-size: 14px;
      padding: 0 20px;
    }
  </style>
  <div class="model">
    <div class="toast">
      这是一个toast
    </div>
  </div>

align-items：stretch 如果元素没设置高的话，高度将与父元素相等（铺满整个元素）
align-items：baseline 与元素第一行文字的头对齐，我暂时没找到用此属性的地方

纵向布局的情况下：

就反着来，如果不习惯就先当屏幕是横着的，就比如说，我竖向想让项目上下对齐，并且元素水平居中。
比如做一个常见的介绍页：

这里写图片描述

 <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
     body,html{
      height: 100%
     }
     .col{
      height: 100%;
      background: #e3e3e3;
      display: flex;
      /* 正好与横向的属性设置相反 */
      flex-direction:column;/* 将方向设置为垂直*/
      justify-content: space-between;/* 两端对齐*/
      align-items: center;/* 水平居中 */
     }
     .head{
      width: 200px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      background: #fff;
     }
     .content{
      width: 300px;
      height: 400px;
      background: green;
     }
    .row-between{
      width: 90%;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }
    .logo{
      width: 50px;
      height: 30px;
      line-height: 30px;
      background: pink;
      text-align: center;
      color:#fff;
    }
    button{
      width: 100px;
      height: 30px;
      border:1px solid pink;
      border-radius: 8px;
      background: #fff;
    }

   </style>
  <div class="col">
    <div class="head">
      我是个放头像的地方
    </div>
    <div class="content">
    </div>
    <div class="row-between">
     <button>按钮一</button>
     <div class="logo">
       logo
     </div>
     <button>按钮二</button>
   </div>
  </div>

设置到子元素的常用属性

order: 设置排序的，数值越小，元素越靠前（用的不多）
flex-grow: 设置项目的放大比例有点栅格化布局的意思比如三个子元素，全部设置 flex-grow: 1 则在父元素内宽度都相等（3等分）
flex-shrink：设置项目的缩小比例，当空间不足时，所有项目会默认等比例缩小。
当设置flex-shrink:0 时，当空间不足时元素也不会缩小
注意：若设置了元素的宽度,还有设置 flex-shrink:0 ，否则项目空间不足时，元素会缩小，设置的宽度就不生效了
flex-basis：百分比或者像素，当项目空间充足时，给子元素设置一个默认的宽度，默认auto（项目的本来大小）
align-self：这个属性呢，就是单元素版的align-items（设置后，所有子元素都会生效），但如果只想让一个元素居中，就设置改元素align-self：center

（三）flex布局的常用demo

1、带icon的标题，icon居中：

这里写图片描述

    .title{
      margin-top:20px;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

2、左中右布局，左边右定宽，中间部分自适应。

这里写图片描述

在父元素中设置 justify-content: space-between;在左右子元素中设置flex-shrink:0(防止空间不足时缩小);在中间元素下设置flex-grow:1(让它撑满中间区域);

3、input输入框跟不定长的label撑满一行

这里写图片描述

其实跟上面要使用的方法差不多，将父元素设置justify-content: space-between，将要固定的元素(label)设置flex-shrink:0，将要铺满的元素(input)设置flex-grow:1。

    .form-item{
      margin: 20px 24px;
      display: flex;
      justify-content: space-between;
      height: 36px;
      line-height: 36px;
    }
    .form-item label{
      flex-shrink:0 ;
      padding-right: 

    }
    .form-item input{
      padding-left: 10px;
      border:1px solid #e3e3e3;
      border-radius: 8px;
      flex-grow: 1;
    }

4、流式布局（一排放4个，放不下就换行）

这里写图片描述

    .flow{
      display: flex;
      flex-wrap:wrap;
      justify-content: flex-start;
      border:1px solid #e3e3e3;
    }
    .flow .item{
      flex:0 0 22%;
      /*
        等同于
        flex-grow: 0;
        flex-shrink:0 ;
        flex-basis:22%;
      */
      padding-bottom: 22%;/* 做到宽高相等 */
      margin: 1.5%;
      background: yellow;
    }