¿Cómo uso flexbox para alinear un cuadro en la parte superior con dos debajo como en mi captura de pantalla

enter image description here

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
Wayneio 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
IvanS95 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
symlink 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
Tomi Adebanjo 10 oct. 2019 a las 20:36