css display - Espaciado entre elementos de Flexbox




3 Answers

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

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?




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



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/




Related