почему свойство выравнивания контента здесь не работает? - PullRequest
0 голосов
/ 10 июня 2018

не должны ли гибкие элементы .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>

1 Ответ

0 голосов
/ 10 июня 2018

Я не уверен на 100%, имеете ли вы это в виду, но для уменьшения вертикального расстояния между гибкими элементами необходимо удалить стандартные теги 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 к дочерним элементам, которые перемещают их ближе друг к другу.Уже одно это выровняет гибкие элементы в верхней части их контейнера, и я понял, что вы хотите, чтобы они были в вертикальной середине, поэтому я также добавил / изменил align-content: center; для контейнера.HTH

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...