Question

当使用此属性时，

.center-section-container的弹性项不应该更靠近在一起吗？他们似乎没有受到影响。我正在使用柔性包装，所以这些物品现在在不同的线条中，但两个相距很远，我希望它们在十字轴上更近。

这就是我所做的：

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>

Answer 1

我不是100％确定你的意思，但为了减少灵活项目之间的垂直距离，你需要删除margin和{{1}的默认h1 }标签（顺便说一句，你在结束h4标签中有一个拼写错误。）

h2/h4

我将.center-section-container { display: flex; flex-wrap: wrap; align-content: center; } .center-section-container>* { border: solid yellow; margin: 0; }添加到子元素中，使它们更加靠近。仅此一项就可以将Flex项目对齐其容器顶部，我知道您希望它们位于垂直中间位置，因此我还为容器添加/更改了margin: 0。 HTH

＆＃13;

align-content: center;

＆＃13;

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;
}

＆＃13;

为什么对齐内容属性不起作用？

1 个答案: