Is it expected for the flex items of the .center-section-container to be closer together when using this property? They do not seem to be affected at all.
I have applied flex wrap so the items are now in different lines but too far away from each other, I would prefer them to be closer on the cross axis.
This is my current implementation:
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 lies the issue**/
.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>