如何调整空间的间距？

Question

我有点迷失了： 我试图使3个div（水平）40px之间的空间，但它似乎工作时，我这样做： https://github.com/itsolidude/Tea_Cozy

我希望黄色标记的部分为40px：

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

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

Answer 2

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