¿Cómo uso flexbox para alinear un cuadro en la parte superior con dos debajo como en mi captura de pantalla
Hasta ahora puedo alinear tres seguidos con esto
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
<div className="flex-container">
<div />
<br />
<div />
<div />
</div>
Lo intenté con un br pero no funcionó
0
10 oct. 2019 a las 23:15
3 respuestas
La mejor respuesta
Simplemente proporcione un enfoque diferente si desea un solo contenedor; solo tendría que apuntar a los elementos correctos y aplicar las propiedades flexibles correctas para que se comporten como lo necesita.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flex div:first-child {
width: 100%;
margin-bottom: 20px;
}
.flex div:not(:first-child) {
flex: 1 0 50%;
}
img {
margin: 0 auto;
display: block;
}<div class="flex">
<div>
<img src="https://via.placeholder.com/150" />
</div>
<div>
<img src="https://via.placeholder.com/150" />
</div>
<div>
<img src="https://via.placeholder.com/150" />
</div>
</div>
1
10 oct. 2019 a las 20:45
Es mejor hacer esto con la cuadrícula:
.flex-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 100px;
}
.flex-container>img {
justify-self: center;
border-radius: 50%;
}
.flex-container>img:nth-child(1) {
grid-column: 1/3;
}<div class="flex-container">
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
<img src="http://placekitten.com/200/200" />
</div>
1
10 oct. 2019 a las 20:25
Puedes usar flex-wrap
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.box1 {
width: 100%;
display: flex;
justify-content: center;
}<div class="container">
<div class="box1">
<div>
Box 1
</div>
</div>
<div>Box 2</div>
<div>Box 3</div>
</div
0
10 oct. 2019 a las 20:36