为什么 justify-content 不导致元素之间的空间？ [关闭]

Question

我需要元素之间的空闲空间。为此我添加了justify-content: space-between;，但不知何故它不起作用。

.cards {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: arial, serif;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 40%;
  height: 40%;
}

.price {
  color: grey;
  font-size: 22px;
}

.cards button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.cards button:hover {
  opacity: 0.7;
}

<div class="cards">
  <div class="card">
    <img id="coffeeImage1" src="https://via.placeholder.com/180" alt="Coffee" style="width:100%">
    <h1 id="name1">Название</h1>
    <p id="price1" class="price">price</p>
    <p id="weight1">weight</p>
    <p id="country1">country</p>
    <p><button>Добавить в корзину</button></p>
  </div>

  <div class="card">
    <img id="coffeeImage2" src="https://via.placeholder.com/180"" alt="Coffee" style="width:100%">
    <h1 id="name2">Название</h1>
    <p id="price2" class="price">price</p>
    <p id="weight2">weight</p>
    <p id="country2">country</p>
    <p><button>Добавить в корзину</button></p>
  </div>

  <div class="card">
    <img id="coffeeImage3" src="https://via.placeholder.com/180"" alt="Coffee" style="width:100%">
    <h1 id="name3">Название</h1>
    <p id="price3" class="price">price</p>
    <p id="weight3">weight</p>
    <p id="country3">country</p>
    <p><button>Добавить в корзину</button></p>
  </div>
</div>

它们太多了，我必须逐个写出来。该项目使用HTML + CSS + JAVASCRIPT（无框架或第三方库）。

Answer 1

你的类cards这里是容器（就像这里解释的https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。

但你的类容器不应该被束缚

.cards {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

然后你就可以上课card，意思是你孩子上的课。

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    font-family: arial, serif;
}

Answer 2

这可能是因为弹性项目的宽度不受限制，并且由于其内部内容，它们试图填满所有可用空间。限制宽度起作用。

.cards {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    font-family: arial, serif;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 100%;
    height: 40%;
}

.card{
background-color: red;
border: 1px solid black;
width: 30%;
}


.price {
    color: grey;
    font-size: 22px;
}

.cards button {
    border: none;
    outline: 0;
    padding: 12px;
    color: white;
    background-color: #000;
    text-align: center;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
}

.cards button:hover {
    opacity: 0.7;
}

<div class="cards">
    <div class="card">
        <img id="coffeeImage1" src="https://st.depositphotos.com/1318696/3726/v/450/depositphotos_37267091-stock-illustration-seamless-coffee-background.jpg" alt="Coffee" style="width:100%">
        <h1 id="name1">Название</h1>
        <p id="price1" class="price">price</p>
        <p id="weight1">weight</p>
        <p id="country1">country</p>
        <p><button>Добавить в корзину</button></p>
    </div>

<div class="card">
    <img id="coffeeImage2" src="https://st.depositphotos.com/1318696/3726/v/450/depositphotos_37267091-stock-illustration-seamless-coffee-background.jpg" alt="Coffee" style="width:100%">
    <h1 id="name2">Название</h1>
    <p id="price2" class="price">price</p>
    <p id="weight2">weight</p>
    <p id="country2">country</p>
    <p><button>Добавить в корзину</button></p>
</div>

<div class="card">
    <img id="coffeeImage3" src="https://st.depositphotos.com/1318696/3726/v/450/depositphotos_37267091-stock-illustration-seamless-coffee-background.jpg" alt="Coffee" style="width:100%">
    <h1 id="name3">Название</h1>
    <p id="price3" class="price">price</p>
    <p id="weight3">weight</p>
    <p id="country3">country</p>
    <p><button>Добавить в корзину</button></p>
</div>
</div>