cómo dar espacio entre divs en html con la ayuda del ejemplo de código flexible

Contamos con la mejor solución que hallamos por todo internet. Deseamos que te sea de ayuda y si quieres compartir alguna mejora hazlo libremente.

Ejemplo 1: agregue espacio entre todos los elementos html flex

/* There is now a `gap` CSS property
** This works for , , and  layouts
** #box would lay out all it's children with 10px spacing between 
** different rows and 20px betwen different columns
*/#boxdisplay: flex;flex-wrap: wrap;gap:10px20px;/* row-gap [column-gap]*//* Supported by most modern browesers, Safari excluded. */

Ejemplo 2: forma correcta de hacer el espaciado de flexbox

/**
Flexbox doesn't have collapsing margins.
Flexbox doesn't have anything akin to border-spacing for tables (except for CSS property gap which isn't supported in Safari, caniuse)
Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.
**/.uppermargin:30px;display:flex;flex-direction:row;width:300px;height:80px;border:1pxred solid;padding:5px;/* this */.upper> divflex:11 auto;border:1pxred 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;
"upper">
  
aaa
aaa
  
aaa
  
aaa
aaa
  
aaa
aaa
aaa
  
aaa
  
aaa


"upper mc">
  
aaa
aaa
  
aaa
  
aaa
aaa
  
aaa
aaa
aaa
  
aaa
  
aaa

Si haces scroll puedes encontrar las críticas de otros programadores, tú aún tienes la libertad de dejar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador