flex 這樣的布局怎么做?

如圖

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

            width: 900px;
            margin: 0 auto;
        }

wrapper space-around 在這種情況下出現(xiàn) 上面3個(gè)正常的等分, 下面剩下2個(gè)就表現(xiàn)的不太好, 還是會(huì)等分留白, 而不是左對(duì)齊的去等分.

目前我的做法是填充空白的子元素, 通過(guò)js去判斷需要?jiǎng)討B(tài)填充幾個(gè)空白子元素.

不知道有沒(méi)有css的解決方案

回答

編輯回答

薄荷糖

圖片描述

2017年12月21日 11:28

編輯回答

安若晴

不還意思看錯(cuò)了！眼神不好！

2017年12月30日 19:54

編輯回答

鐧簞噯

為啥不對(duì)父元素做左右的padding，然后采用space-between布局呢？效果基本一樣啊。

.wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 900px;
    margin: 0 auto;
    padding: 0 16px;
    
}

2018年5月11日 21:10

編輯回答

夢(mèng)若殤

以前遇到過(guò)，貌似css沒(méi)解決方法吧。要么你搞一個(gè)透明在后面

2017年10月24日 07:26

編輯回答

拼未來(lái)

我也是使用的填充空白元素方法，真要說(shuō)純css解決，倒也不是沒(méi)有，只不過(guò)令人蛋碎。。
具體看以下例子。
https://jsfiddle.net/pj0aq6vn/2/

2017年2月26日 00:08

編輯回答

拼未來(lái)

我的方法可能有點(diǎn)極端：

  <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>

效果好像是達(dá)到了
圖片描述

2017年6月14日 23:00

編輯回答

兔囡囡

我看錯(cuò)了題主的題意，請(qǐng)忽略我的回答。

使用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;
}

2018年7月28日 09:05

編輯回答

玩控

方案一：

  <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);
            //( 總寬度 減去 子節(jié)點(diǎn)個(gè)數(shù) 乘以 子節(jié)點(diǎn)寬度 ) 平均分配到（子節(jié)點(diǎn)個(gè)數(shù)+1）個(gè)區(qū)域
            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>

方案二：事先就計(jì)算好具體值給 margin-left

2017年12月18日 07:01

編輯回答

乖乖瀦

給你提供一個(gè)簡(jiǎn)單的解決方案https://segmentfault.com/a/11...
https://jsfiddle.net/zwwill/4...

2017年8月27日 14:14

編輯回答

孤星

<!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>

效果圖

2017年10月5日 17:38