Question

想知道如何在水平行中的div之间创建一些间距。

我使用justify-content:center将框居中，并flex-wrap:wrap在窗口重新调整大小时将其包裹起来。但是，当我尝试将margin-left和margin-right添加到#div2（中间框）时，会在重新调整窗口大小时干扰居中布局。

正如您可能已经注意到我正在尝试使我的网站对移动设备友好并且响应任何屏幕尺寸。谢谢。

以下是代码：

  <div id="pusher">
  </div>

  <section id="billboard">
  </section>


  <section id="section1">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </section>


body,html{
padding:0px;
margin:0px;
}

header{
width:100%;
background-color:brown;
height:75px;
position:fixed;
}

#pusher{
width:100%;
height:75px;
}

#billboard{
height:500px;
background: url("");
background-repeat:no-repeat;
background-size:cover;
background-color:red;
}

#section1{
display:flex;
flex-wrap:wrap;
justify-content:center;
overflow:auto;
}


#div1{
background-color:blue;
height:250px;
width:250px;
min-width:250px;
}

#div2{
background-color:yellow;
height:250px;
width:250px;
min-width:250px;
}

#div3{
background-color:green;
height:250px;
width:250px;
min-width:250px;
}

Answer 1

只需对所有div应用保证金：

#section1 > div { margin: 10px; }

DEMO

Answer 2

由于section的显示为flex，请尝试将justify-content:center;更改为justify-content:space-around;。它在盒子之间提供空间。当浏览器缩小时，它也会包装盒子。

如何在Flex容器中的居中div之间创建相等的间距

2 个答案: