Mejor manera de establecer la distancia entre los elementos de flexbox

Para establecer la distancia mínima entre los elementos de flexbox estoy usando margin: 0 5px en .item y margin: 0 -5px en el contenedor. A mí me parece una chapuza, pero no encuentro ninguna forma mejor de hacerlo.

[Ejemplo][1]

-- begin snippet: js hide: false -->

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

Fin del fragmento;

Salman A
Pregunta editada 3º diciembre 2018 в 7:27
Programación
css3 css flexbox
17º diciembre 2013 в 5:35
19 vistas
Solución
  • Flexbox no tiene márgenes colapsables.
  • Flexbox no tiene nada parecido a border-spacing para las tablas (excepto la propiedad CSS gap que no está bien soportada en la mayoría de los navegadores, caniuse)

Por lo tanto, conseguir lo que pides es un poco más difícil.

En mi experiencia, la forma más limpia que no utiliza :first-child/:last-child y funciona sin ninguna modificación en flex-wrap:wrap es establecer padding:5px en el contenedor y margin:5px en los hijos. Esto producirá un espacio de 10px entre cada hijo y entre cada hijo y su padre.

[Demo](http://jsfiddle.net/7XD8s/)

begin snippet: js hide: false console: true -->

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}
<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

Fin del fragmento;

Flimm
Respuesta editada 21º septiembre 2019 в 3:42
Comentarios (9)

Puede utilizar bordes transparentes.

He contemplado esta cuestión mientras intentaba construir un modelo de rejilla flexible que pueda volver a un modelo de tablas + celdas de tabla para los navegadores más antiguos. Y los bordes para los canalones de las columnas me parecieron la mejor opción apropiada, ya que las celdas de la tabla no tienen márgenes.

Por ejemplo

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

También tenga en cuenta que necesita min-width: 50px; para flexbox. El modelo flex no manejará tamaños fijos a menos que hagas flex: none; en el elemento hijo particular que quieres como fijo y por lo tanto excluido de ser "flexi". http://jsfiddle.net/GLpUp/4/ Pero todas las columnas juntas conflex:none;` ya no es un modelo flex. Aquí hay algo más cercano a un modelo flex: http://jsfiddle.net/GLpUp/5/

Así que puedes usar los márgenes normalmente si no necesitas el fallback de table-cell para los navegadores más antiguos. http://jsfiddle.net/GLpUp/3/

La configuración de background-clip: padding-box; será necesaria cuando se utilice un fondo, ya que de lo contrario el fondo fluirá hacia la zona del borde transparente.

Tracker1
Respuesta editada 15º marzo 2017 в 11:03
Comentarios (9)

La forma más fácil de hacerlo es con porcentajes y dejando que el margen se ajuste a su anchura

Esto significa que usted termina con algo como esto si usted estaba usando su ejemplo

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

Sin embargo, los valores se basan en la anchura, lo que podría no ser bueno para todo el mundo.

Comentarios (1)