flex 这样的布局怎么做?

yepnope
  • 244

clipboard.png

如图

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

            width: 900px;
            margin: 0 auto;
        }

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

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

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

回复
阅读 4.9k
10 个回答
月影
  • 2.7k

方案一:

  <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

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

helloworld_
  • 3k

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

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

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

我的方法可能有点极端:

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

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

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

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

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

ntnyq
  • 1.2k
<!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 篇内容引用
宣传栏