css - espacio - manejo de flexbox

Espaciado entre elementos de Flexbox

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?

Answer 1

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.

Answer 2

El diseño deseado se puede lograr usando un divisor div con margen negativo

.flex-wrapper{
    margin: -20px;
}

Código de trabajo http://jsfiddle.net/8cju5jpd/

Answer 3

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

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

Answer 4

Puede intentar establecer el mismo margen para todos los cuadros y luego revertir esto en el contenedor:

Entonces reemplace esto:

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

Con este:

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

Answer 5

Si bien la respuesta Rejoy funciona a la perfección, no está lista para responder porque las filas están bloqueadas.

flex-flow es tu nuevo amigo. Sin embargo, flex no está exento de errores. El truco de margen negativo que conocemos de varios grid framework funciona, a menos que esté en IE, donde los elementos se envuelven demasiado pronto porque usa content-box como box-size. Pero hay una solución fácil.

Ejemplo de trabajo: https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

Las cajas vienen con flex-basis: auto , debido a IE. Pero simplemente podemos usar width lugar:

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}

Answer 6

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; }