Ancho de fluido con DIV igualmente espaciados

Tengo un contenedor de ancho de fluido DIV.

Dentro de esto tengo 4 DIV, todos de 300 px x 250 px...

<div id="container">
   <div class="box1"> </div>
   <div class="box2"> </div>
   <div class="box3"> </div>
   <div class="box4"> </div>
</div>

Lo que quiero que suceda es que el cuadro 1 flote hacia la izquierda, el cuadro 4 flote hacia la derecha y los cuadros 2 y 3 estén espaciados uniformemente entre ellos. Quiero que el espacio también sea fluido, de modo que a medida que el navegador se hace más pequeño, el espacio también se hace más pequeño.

Jul 29 '11 03:07 Lee Price

La forma más sencilla de hacer esto ahora es con un flexbox:

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

El CSS es entonces simplemente:

#container {
    display: flex;
    justify-content: space-between;
}

demostración: http://jsfiddle.net/QPrk3/

Sin embargo , actualmente esto sólo es compatible con navegadores relativamente recientes ( http://caniuse.com/flexbox ). Además, la especificación para el diseño de Flexbox ha cambiado varias veces, por lo que es posible cubrir más navegadores al incluir adicionalmente una sintaxis más antigua:

http://css-tricks.com/old-flexbox-and-new-flexbox/

http://css-tricks.com/using-flexbox/

Mar 15 '2014 11:03 Ben Jackson

Si css3 es una opción, esto se puede hacer usando la calc()función css.

Caso 1: Justificar cuadros en una sola línea ( FIDDLE )

El marcado es simple: un montón de divs con algún elemento contenedor.

CSS se ve así:

div
{
    height: 100px;
    float: left;
    background:pink;
    width: 50px;
    margin-right: calc((100% - 300px) / 5 - 1px); 
}
div:last-child
{
    margin-right:0;
}

donde -1px para corregir un error de cálculo/redondeo de IE9+ - ver aquí

Caso 2: Justificar cuadros en varias líneas ( FIDDLE )

Aquí, además de la calc()función, media queriesson necesarios.

La idea básica es configurar una consulta de medios para cada estado de #columnas, donde luego uso calc() para calcular el margen derecho de cada uno de los elementos (excepto los de la última columna).

Esto parece mucho trabajo, pero si usas LESS o SASS, esto se puede hacer con bastante facilidad.

(Todavía se puede hacer con CSS normal, pero luego tendrás que hacer todos los cálculos manualmente y luego, si cambias el ancho del cuadro, tendrás que resolver todo nuevamente)

A continuación se muestra un ejemplo usando LESS: (Puedes copiar/pegar este código aquí para jugar con él, [también es el código que usé para generar el violín mencionado anteriormente])

@min-margin: 15px;
@div-width: 150px;

@3divs: (@div-width * 3);
@4divs: (@div-width * 4);
@5divs: (@div-width * 5);
@6divs: (@div-width * 6);
@7divs: (@div-width * 7);

@3divs-width: (@3divs + @min-margin * 2);
@4divs-width: (@4divs + @min-margin * 3);
@5divs-width: (@5divs + @min-margin * 4);
@6divs-width: (@6divs + @min-margin * 5);
@7divs-width: (@7divs + @min-margin * 6);


*{margin:0;padding:0;}

.container
{
    overflow: auto;
    display: block;
    min-width: @3divs-width;
}
.container > div
{
    margin-bottom: 20px;
    width: @div-width;
    height: 100px;
    background: blue;
    float:left;
    color: #fff;
    text-align: center;
}

@media (max-width: @3divs-width) {
    .container > div {  
        margin-right: @min-margin;
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @3divs-width) and (max-width: @4divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{3divs})/2 - 1px)";
    }
    .container > div:nth-child(3n) {  
        margin-right: 0;
    }
}

@media (min-width: @4divs-width) and (max-width: @5divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{4divs})/3 - 1px)";
    }
    .container > div:nth-child(4n) {  
        margin-right: 0;
    }
}

@media (min-width: @5divs-width) and (max-width: @6divs-width) {
    .container > div {  
        margin-right: ~"calc((100% - @{5divs})/4 - 1px)";
    }
    .container > div:nth-child(5n) {  
        margin-right: 0;
    }
}

@media (min-width: @6divs-width){
    .container > div {  
        margin-right: ~"calc((100% - @{6divs})/5 - 1px)";
    }
    .container > div:nth-child(6n) {  
        margin-right: 0;
    }
}

Básicamente, primero debe decidir el ancho del cuadro y el margen mínimo que desea entre los cuadros.

Con eso, puedes calcular cuánto espacio necesitas para cada estado.

Luego, use calc() para calcular el margen derecho y nth-child para eliminar el margen derecho de los cuadros de la columna final.

La ventaja de esta respuesta sobre la respuesta aceptada que utiliza text-align:justifyes que cuando tiene más de una fila de cuadros, los cuadros de la última fila no se "justifican", por ejemplo: si quedan 2 cuadros en la última fila, yo No quiero que el primer cuadro esté a la izquierda y el siguiente a la derecha, sino que los cuadros se sigan en orden.

Con respecto a la compatibilidad con el navegador : esto funcionará en IE9+, Firefox, Chrome, Safari6.0+ - (consulte aquí para obtener más detalles). Sin embargo, noté que en IE9+ hay un pequeño problema entre los estados de consulta de medios. [si alguien sabe cómo solucionar este problema, realmente me gustaría saberlo :)] <-- SOLUCIONADO AQUÍ

Apr 30 '2013 22:04 Danield

Otras publicaciones han mencionado flexbox , pero si se necesita más de una fila de elementosspace-between , la propiedad de flexbox falla (ver el final de la publicación)

Hasta la fecha, la única solución limpia para esto es con la

Módulo de diseño de cuadrícula CSS ( demostración de Codepen )

Básicamente, el código relevante necesario se reduce a esto:

ul {
  display: grid; /* (1) */
  grid-template-columns: repeat(auto-fit, 120px); /* (2) */
  grid-gap: 1rem; /* (3) */
  justify-content: space-between; /* (4) */
  align-content: flex-start; /* (5) */
}

1) Convertir el elemento contenedor en un contenedor de cuadrícula.

2) Configure la cuadrícula con una cantidad "automática" de columnas, según sea necesario. Esto se hace para diseños responsivos. El ancho de cada columna será de 120px. (Tenga en cuenta el uso de auto-fit(a diferencia de auto-fill) que (para un diseño de 1 fila) colapsa las pistas vacías a 0, lo que permite que los elementos se expandan para ocupar el espacio restante. (consulte esta demostración para ver de qué estoy hablando ) ).

3) Establezca espacios/medianes para las filas y columnas de la cuadrícula; aquí, dado que desea un diseño de 'espacio entre', el espacio en realidad será un espacio mínimo porque crecerá según sea necesario.

4) y 5) - Similar a flexbox.

body {
  margin: 0;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  grid-gap: 1rem;
  justify-content: space-between;
  align-content: flex-start;
  
  /* boring properties: */
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
}
li {
  background: tomato;
  height: 120px;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Demostración de Codepen (cambie el tamaño para ver el efecto)

Soporte del navegador - Caniuse

¡Actualmente compatible con Chrome (Blink), Firefox, Safari y Edge! ... con apoyo parcial de IE (Ver esta publicación de Rachel Andrew)

NÓTESE BIEN:

La propiedad de Flexbox space-betweenfunciona muy bien para una fila de elementos, pero cuando se aplica a un contenedor flexible que envuelve sus elementos (con flex-wrap: wrap), falla porque no tiene control sobre la alineación de la última fila de elementos; la última fila siempre estará justificada (normalmente no es lo que quieres)

Demostrar:

body {
  margin: 0;
}
ul {
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  
  list-style: none;
  width: 90vw;
  height: 90vh;
  margin: 2vh auto;
  border: 5px solid green;
  padding: 0;
  overflow: auto;
  
}
li {
  background: tomato;
  width: 110px;
  height: 80px;
  margin-bottom: 1rem;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen (Cambie el tamaño para ver de qué estoy hablando)

Lecturas adicionales sobre cuadrículas CSS:

• MDN
• Jen Simmons: aprende la cuadrícula CSS
• Una guía completa para CSS Grid | Referencia CSS de Codrops
• Una guía completa de Grid: trucos de CSS

Mar 23 '2017 14:03 Danield

Esto funcionó para mí con 5 imágenes en diferentes tamaños.

1. Crear un div contenedor
2. Una lista desordenada para las imágenes.
3. En CSS, lo desordenado debe mostrarse verticalmente y sin viñetas.
4. Justificar el contenido del contenedor div

Esto funciona debido a justify-content:space-between, y está en una lista, que se muestra horizontalmente.

En CSS

 #container {
            display: flex;
            justify-content: space-between;
 }
    #container ul li{ display:inline; list-style-type:none;
}

en html

<div id="container"> 
  <ul>  
        <li><img src="box1.png"><li>
        <li><img src="box2.png"><li>
        <li><img src="box3.png"><li>
        <li><img src="box4.png"><li>
        <li><img src="box5.png"><li>
    </ul>
</div>

Dec 24 '2015 19:12 Sebastián Brun Valiente