flex html

Espaciado CSS3 Flexbox entre elementos

Question

Siendo algo nuevo en Flexbox (aunque tengo experiencia en CSS), me parece que una cosa convenientemente "pasada por alto" por la mayoría de los tutoriales que he leído es el espacio entre los elementos flexibles.

Por ejemplo, uno de los tutoriales más citados es este de CSS Tricks .

Es muy bueno y ha sido útil, diagramas como este me han desanimado:

Observe los espacios entre los elementos flexibles. Aunque no se menciona en ninguna parte, ni en el código de muestra, parece que la única forma de obtener los espacios es con márgenes CSS.

¿Correcto, o me estoy perdiendo algo importante aquí?

Porque lo que necesito crear es esto, muy parecido al demo "central" de arriba:

Sin embargo, cuando lo intento yo mismo, por supuesto obtengo esto:

si uso space-around, obtengo esto en su lugar. Enorme espacio.

Por lo tanto, parece que necesito agregar margen-derecho a los primeros 2 cuadros para obtener 3 cuadros centrados con un pequeño espacio entre ellos.

¿Es simplemente un mal caso de uso para Flexbox? Porque veo poca ventaja al crear mis 3 cajas con Flexbox sobre el uso de márgenes simples y centrado.

¿Me estoy perdiendo algo obvio aquí?

Answer 1

No, no te estás perdiendo nada. Flexbox es excelente para ordenar elementos y definir la alineación general de esos elementos a lo largo de ejes principales o transversales, pero no habla directamente con el espaciado de elementos individuales. Si echas un vistazo a este Codepen utilizado en el artículo de Flexbox , notarás que usan:

margin-top: 10px

para definir el espaciado entre elementos. ¡Espero que esto ayude!

Answer 2

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class=''container''>
  <div class=''rope''>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>