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

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
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值