why the align content property isn't working here? - css

Question

shouldn't the flex items of the .center-section-container be closer together when this property is use? they doesn't seem to be affected all.
i'm using flex wrap so the items are now in different lines but two far away to each other, I would like them to be closer on the cross axis.
here is what i have done:
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

I am not 100% sure if you mean this, but in order to have less vertical distance between the flex items, you need to remove the default margin of the h1 and h4 tags (BTW, you have a typo in the closing h2/h4 tag).
.center-section-container {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.center-section-container>* {
border: solid yellow;
margin: 0;
}
I added margin: 0 to the child elements which moves them closer together. This alone would align the flex items at the top of their container, and I understood you want them in the vertical middle, so I also added / changed align-content: center; for the container. 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>