问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

flex 这样的布局怎么做?

头像
yepnope
    24444974

    clipboard.png

    如图

            .wrapper{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;

            width: 900px;
            margin: 0 auto;
        }

    wrapper space-around 在这种情况下出现 上面3个正常的等分, 下面剩下2个就表现的不太好, 还是会等分留白, 而不是 左对齐的去等分.

    目前我的做法是填充空白的子元素, 通过js去判断需要动态填充几个空白子元素.

    不知道有没有css的解决方案

    javascriptcsscss3前端
    阅读 6.6k
    10 个回答
    得票最新
    头像
    月影
      2.7k1724

      方案一：

        <style>
        *{margin: 0; padding: 0}
        .wrapper{
            display: flex;
            flex-wrap: wrap;
            width: 900px;
            border:1px solid black;
            margin: 0 auto;
        }
        .item{
            width: 25%;
            height: 200px;
            border:1px solid red;
            margin-left: calc((900px - 3*25%)/4);
            //( 总宽度 减去 子节点个数 乘以 子节点宽度 ) 平均分配到（子节点个数+1）个区域
            margin-bottom:10px;
          }
    </style>
<div class="wrapper">
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
    <div class="item"> </div>
</div>

      方案二：事先就计算好具体值给 margin-left

      头像
      不请自来
        1.2k42850

        以前遇到过，貌似css没解决方法吧。要么你搞一个透明在后面

        头像
        helloworld_
          3k2822

          我看错了题主的题意，请忽略我的回答。

          使用flex

          html:

          <div class="box">
  <div class="item">
    12
  </div>
  <div class="item">
    12
  </div>
  <div class="item">
    12
  </div>
</div>
<div class="box">
  <div class="item">
    12
  </div>
  <div class="item">
    12
  </div>
</div>

          css:

          .box{
 width:800px;
 display: -webkit-flex; /* Safari */
  display: flex;
  border:1px solid blue;
  justify-content: center;
}
.item{
  width:200px;
  border:1px solid red;
  margin-right:10px;
}
          头像
          spencerht
            7.8k2728

            我也是使用的填充空白元素方法，真要说纯css解决，倒也不是没有，只不过令人蛋碎。。
            具体看以下例子。
            https://jsfiddle.net/pj0aq6vn/2/

            头像
            Xiaobo2020
              30215

              我的方法可能有点极端：

                <div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
                <style>
    * {
      margin: 0;
      padding: 0;
    }
    .wrapper {
      display: flex;
      width: 900px;
      height: auto;
      padding-bottom: 10px;
      margin: 10px;
      flex-wrap: wrap;
      border: 1px solid #000;
    }
    .box {
      display: block;
      flex: 0 0 calc((100% / 3) - 20px);
      width: calc((100% / 3) - 20px);
      height: 200px;
      margin: 10px 10px 0 10px;
      border: 1px solid red;
      box-sizing: border-box;
    }
  </style>

              效果好像是达到了
              图片描述

              头像
              xuliang
                692819

                为啥不对父元素做左右的padding，然后采用space-between布局呢？效果基本一样啊。

                .wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    
}
                头像
                三国哥哥
                  149720

                  不还意思看错了！眼神不好！

                  头像
                  a_why
                    202917

                    图片描述

                    头像
                    zwwill_木羽
                      6.3k2931
                      头像
                      ntnyq
                        1.2k2822
                        <!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
  <title>demo</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .wrapper {
      display: flex;
      width: 1000px;
      padding: 50px 120px;
      border: 2px solid #aaa;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
    }
    .item {
      width: 200px;
      height: 200px;
      margin-bottom: 40px;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

                        效果图

                        撰写回答
                        你尚未登录，登录后可以
                        • 和开发者交流问题的细节
                        • 关注并接收问题和回答的更新提醒
                        • 参与内容的编辑和改进，让解决方法与时俱进
                        被 1 篇内容引用
                        推荐问题
                        宣传栏