css - 为什么align content属性在这里不起作用？

使用此属性时，.center-section-container的弹性项目不应该更靠近在一起吗？他们似乎并没有受到全部影响。
我正在使用flex wrap，所以这些项目现在位于不同的行中，但彼此之间相距很远，我希望它们在交叉轴上更近。

这是我所做的：

body {
  border: solid orange;
  width: 100vw;
  height: 100vh;
  color: lightgrey;
}

.main-container {
  border: solid black;
  width: 100%;
  max-width: 840px;
  margin: 0;
  display: flex;
}

.main-container>* {
  border: solid pink;
}

.square {
  min-height: 154.53px;
  min-width: 171.53px;
  border-radius: 10px;
  background-color: #555;
}

/**here I have the problem**/
.center-section-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

.center-section-container>* {
  border: solid yellow;
}

.text1 {
  color: black;
}

.subtext {
  flex-basis: 60%;
}

.button-grey,
.button-white {
  border-radius: 5px;
  flex-basis: 40%;
  height: 50px;
}

.button-grey {
  background-color: grey;
  color: white;
}

.button-white {
  border: solid grey;
  background-color: white;
  color: inherit;
}

.aside {
  width: 200px;
}

<article class=main-container>
  <div class="square"></div>

  <section class="center-section-container">
    <h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
    <h4 class="subtext">Fisioterapia general </h2>
      <button class="button-grey" type="button" name="button">Reservar
           </button>
      <button class="button-white" type="button" name="button">Pedir
           </button>
  </section>

  <aside class="aside">

    <h3 class="valoraciones"> 24 valoraciones </h3>
    <div class="number-container">
      <div class="number">8,9</div>
    </div>

    <a class="comentarios" href="#"> ver comentarios</a>

    <a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
    </a>


  </aside>
</article>

最佳答案

我不确定是不是100％肯定是这个意思，但是为了减少flex项目之间的垂直距离，您需要删除margin和h1标签的默认h4（顺便说一句，在结束的h2/h4标记中）。

.center-section-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.center-section-container>* {
  border: solid yellow;
  margin: 0;
}

我在子元素上添加了margin: 0，使它们更加靠近。仅此一项就可以将flex项目在其容器的顶部对齐，并且我知道您希望它们在垂直的中间，因此我还为容器添加了/更改了align-content: center;。高温超导

body {
  border: solid orange;
  width: 100vw;
  height: 100vh;
  color: lightgrey;
}

.main-container {
  border: solid black;
  width: 100%;
  max-width: 840px;
  margin: 0;
  display: flex;
}

.main-container>* {
  border: solid pink;
}

.square {
  min-height: 154.53px;
  min-width: 171.53px;
  border-radius: 10px;
  background-color: #555;
}

/**here I have the problem**/
.center-section-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

.center-section-container>* {
  border: solid yellow;
    margin: 0;
}

.text1 {
  color: black;
}

.subtext {
  flex-basis: 60%;
}

.button-grey,
.button-white {
  border-radius: 5px;
  flex-basis: 40%;
  height: 50px;
}

.button-grey {
  background-color: grey;
  color: white;
}

.button-white {
  border: solid grey;
  background-color: white;
  color: inherit;
}

.aside {
  width: 200px;
}

<article class=main-container>
  <div class="square"></div>

  <section class="center-section-container">
    <h1 class="text1">Centro de Fisioterapia Guzmán Fernandez </h1>
    <h4 class="subtext">Fisioterapia general </h4>
      <button class="button-grey" type="button" name="button">Reservar
           </button>
      <button class="button-white" type="button" name="button">Pedir
           </button>
  </section>

  <aside class="aside">

    <h3 class="valoraciones"> 24 valoraciones </h3>
    <div class="number-container">
      <div class="number">8,9</div>
    </div>

    <a class="comentarios" href="#"> ver comentarios</a>

    <a class="estrella" href="#"> <img src="images/star.svg" alt="votación estrella" width="20px" height="20px" title="simbolo estrella">
    </a>


  </aside>
</article>

关于css - 为什么align content属性在这里不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50784034/