【CSS】flex布局平分三等分中间间距相等且两端对齐

最新推荐文章于 2024-05-24 17:57:30 发布

向着光芒的女孩

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量3.4w

点赞数 4

分类专栏： CSS html 文章标签： css flex 布局

本文链接：https://blog.csdn.net/ann295258232/article/details/90680253

版权

CSS 同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

在这里插入图片描述

思路：
通过display:flex,再将子元素设置flex:1,再包一层，通过设置padding来设置中间间距，可以达到想要多效果

padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2

完整代码如下：

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <style>
      .container{
        width: 500px;
        margin: 50px auto;
      }

      .container *{
        box-shadow: 0 0 1px #ccc;
      }
      .wrap-flex{
        display:flex;
        text-align: center;
      }
      .wrap-flex-item{
        flex:1;
      }

      .wrap-flex-item:nth-of-type(1){
        padding-right:50px;
      }

      .wrap-flex-item:nth-of-type(2){
        padding-left:25px;
        padding-right:25px;
      }      

      .wrap-flex-item:nth-of-type(3){
        padding-left:50px;
      }   

      .content{
        background: #6cc;
        padding: 50px;
      }         

    </style>
  </head>

  <body>
    <div class="container">
      <div class="wrap-flex">
        <div class="wrap-flex-item">
          <div class="content">A</div>
        </div>
        <div class="wrap-flex-item">
          <div class="content">B</div>        
        </div>
        <div class="wrap-flex-item">
          <div class="content">c</div>         
        </div>
      </div>
    </div>
  </body>
</html>

第二种方法：修改了代码后，可以灵活平分4等分，核心代码如下：

      /*第二种方法 灵活可以4个使用*/
      .grid-part-4 .wrap-flex-item{
        width: calc((100% - 75px)/4);
        margin-right: 25px;
      }

      .grid-part-4 .wrap-flex-item:last-of-type{
        margin-right:0;
      }

在线编辑预览：flex布局平分三等分中间间距相等且两端对齐

在这里插入图片描述

向着光芒的女孩

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
7
评论
【CSS】flex布局平分三等分中间间距相等且两端对齐

思路：通过display:flex,再将子元素设置flex:1,再包一层，通过设置padding来设置中间间距，可以达到想要多效果padding-right(第1个盒子):padding-left(第2个盒子):padding-right(第2个盒子):padding-left(第3个盒子)=2:1:1:2完整代码如下：<!doctype html><html&gt...
复制链接

扫一扫

专栏目录