[css] Espaciado entre elementos de Flexbox



Answers

aquí hay otra forma de obtener lo mismo.

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }
Question

Esto es lo que quiero:

Lo más cercano que tengo. Aplicando margen en los elementos de la caja flexible, luego quitando la mitad del primer y último hijo.

El problema es que :first-child no siempre es el primero visualmente, porque puedo alterar el orden del diseño ( example ).

¿Hay alguna manera de tener en cuenta el orden visual al aplicar el margen?




EDITAR - No sugiero usar este enfoque, es hackish. Lo dejaré aquí para la posteridad.

Lo que hice para abordar esto, ya que no estaba seguro de cuántos elementos tendría dentro de cada espacio flexible. Por ejemplo, estoy construyendo un tema de Drupal y tengo cuatro regiones que se alinean una al lado de la otra, pero quiero que se aproveche todo el ancho, incluso si solo hay contenido en tres de las regiones.

  • Dio a cada región un relleno de 10 píxeles
  • Establezca el color de fondo de cada región para que coincida con el color de fondo del tema, en mi caso blanco
  • Creó un div dentro de cada región (para crear la ilusión de un margen entre ellos.

HTML se ve así:

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSS se ve así:

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

Esto me deja con un diseño como ese (ignore la fealdad, los colores son solo para demostrar):

Hay algunas otras clases agregadas, como 'mitades', 'terceros' y 'cuartos' para ayudar a que las cosas respondan en pantallas más pequeñas y / o más grandes.




Otro punto sólido para usar Flex es que puedes especificar la estrategia a usar para el espacio restante:

.container {
    justify-content: space-between;
}





Related