如何调整空间周围的间距？答案

【问题标题】：How can I adjust spacing for space-around?如何调整空间周围的间距？
【发布时间】：2018-03-31 03:15:30
【问题描述】：

我有点失落：我试图使 3 个 div（水平）之间的空间为 40px，但是当我这样做时它似乎不起作用： https://github.com/itsolidude/Tea_Cozy

我希望黄色标记部分为 40 像素：

html {
  font-family: Helvetica;
  font-size: 22px;
  color: seashell;
  background-color: black;
  opacity: 0.9;
  text-align: center;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  width: 100%;
  z-index: 2;
  background-color: black;
  top: 0;
}

#locations h2 {
  flex: 1 0 100%; /* shorthand for: flex-grow:1;
                                    flex-shrink: 0;
                                    flex-basis: 100%; */
  text-align: center;
  position: absolute;   /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
  top: 1510px;
  z-index: 3;
}

img {
 height: 50px;
 padding-left: 10px;
}

nav span {
  color: seashell;
  padding-right: 30px;
}

.mission-banner {
  background-color: black;
}

.mission-banner h4 {
  padding-bottom: 10px;
}

a {
  cursor: pointer;
  text-decoration-color: seashell;
}

#mission {
  background-image: url(../images/img-mission-background.jpg);
  position: relative;
  margin: 70px auto 0;
  width: 1200px;
  height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#tea-of-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1000px;
  margin: 0 auto 70px;
}

#tea-of-month img {
  height: 200px;
  width: 300px;
  margin-bottom: 10px;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.contact {
  height: 200px;
}
#locations {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  background-image: url(../images/img-locations-background.jpg);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.address {
  background-color: black;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
}

#copyright {
  text-align: left;
  margin-left: 20px;
}

<div id="locations">
        <h2>Locations</h2>
        <div class="address">
          <h3>Downtown</h3>
          <p>384 West 4th St</p>
          <p>Suite 108</p>
          <p>Portland, Maine</p>
        </div>
        <div class="address">
          <h3>East Bayside</h3>
          <p>3433 Phisherman's Avenue</p>
          <p>(Northwest Corner)</p>
          <p>Portland, Maine</p>
        </div>
        <div class="address">
          <h3>Oakdale</h3>
          <p>515 Crescent Avenue</p>
          <p>Second Floor</p>
          <p>Portland, Maine</p>
        </div>
      </div>

我放入了整个 CSS。以防万一有什么影响它。请解释一下您这样做的原因和原因：p

【问题讨论】：

标签： html css flexbox positioning

【解决方案1】：

不要使用justify-content: space-between;，因为这会根据可用空间分配空间。

相反，将 flex-children 居中并给它们 20px 的边距（2 * 20px = 40px）。

.wrap {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: auto;
  border: 1px solid grey;
}

.box {
  background: #000;
  width: 150px;
  height: 150px;
  margin: 20px;
}

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

【讨论】：

【解决方案2】：

或者，您可以设置父容器的最大宽度，从而减少子容器以space-between 样式展开的可用空间。

【讨论】：