start - css cuadrícula de cuadrados con flexbox

flexbox guia (6)

Versión simplificada de la respuesta de G-Cyr

.flex-container { display: flex; flex-flow: row; justify-content: center; } .flex-item { background: tomato; margin: 10px; max-width: 50px; flex-grow: 1; flex-shrink: 0; flex-basis: 0; height: auto; } .flex-item:before { /* The psuedo-element''s padding-top percentage is based on the element''s width. */ padding-top: 100%; content: ''''; float: left; }

Resultado

Estoy tratando de crear una cuadrícula receptiva de cuadrados. Los cuadrados deben cambiar de tamaño para adaptarse al ancho de la ventana gráfica. Los cuadrados no deben cambiar de tamaño al cambiar la altura de la ventana gráfica.

Aprendí a ajustar el ancho de cada cuadrado, pero no sé cómo hacer que los elementos sean cuadrados y cómo escalar su altura cuando cambia el ancho de la ventana.

En el ejemplo en el violín debajo de los siete cuadrados siempre deben caber horizontalmente y deben escalar como cuadrados. No me importa cuántas filas son visibles.

Fiddle aquí http://jsfiddle.net/gonyhvz8/11/

.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row; justify-content: space-around; height: 50px; line-height:30px; } .flex-item { background: tomato; margin: 5px; color: white; font-weight: bold; font-size: 1.5em; text-align: center; flex: 1 0 0px; height: auto; }

El truco habitual para mantener la relación de aspecto es utilizar el hecho de que los valores porcentuales de margen y / o relleno superior e inferior se calculan en función del ancho del elemento contenedor y no de la altura.

Puede ver una versión no flexible de esta pregunta HERE

Sin embargo, le gustaría tener un acuerdo flex con el ancho de sus elementos, no establecer anchos basados en porcentajes. Para eso, se me ocurrió una variación de ese enfoque que funcionará con flex:

.flex-item:before { content: ""; display: block; padding-top: 100%; float: left; }

El truco aquí es usar el pseudo-elemento :before para insertar un elemento de ancho 0 con un padding-top del 100%. Ese 100% es el 100% del ancho, lo que significa que este elemento sin contenido será tan alto como su contenedor. Esto estirará el elemento flexible a la misma altura que su ancho:

Además, deberá eliminar la altura definida de su contenedor flexible o la altura no puede crecer. También es posible que desee agregar min-width: 1.5em para que sus elementos no se reduzcan por debajo de la altura del personaje que tiene en cada cuadrado.

http://jsfiddle.net/gonyhvz8/14/

.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row; justify-content: space-around; line-height:30px; } .flex-item { background: tomato; margin: 5px; color: white; font-weight: bold; font-size: 1.5em; text-align: center; flex: 1 0 0px; min-width: 1.5em; } .flex-item:before { content: ""; display: block; padding-top: 100%; float: left; }

Hay una manera de hacerlo sin elementos html adicionales también. Creé un violín con su base de código http://jsfiddle.net/octavioamu/kq97pm3L/ pero la marca es usar después del elemento con la tabla de visualización

flex-item:after { content: '' ''; padding-top: 100%; display: table; }

Puede usarlo en cualquier cuadrícula, por ejemplo, un cuadrado dentro de una cuadrícula de columna con bootstrap ... Aquí hay un sass mixin trabajando dentro de una columna% grid https://codepen.io/octavioamu/pen/xzeXGm

Y aquí está con tu código:

.flex-container { display: flex; } .flex-item { display: flex; width: 100%; justify-content: center; align-items: center; background-color: red; margin: 5px } .flex-item:after { content: '' ''; padding-top: 100%; display: table; }

No debe establecer ningún tamaño. puede usar un elemento extra o un pseudoelemento con relleno vertical en%. esto le permitirá usar el ancho como referencia: un fragmento para mostrar:

.flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row; justify-content: space-around; line-height:30px; } .flex-item { background: tomato; margin: 5px; color: white; font-weight: bold; font-size: 1.5em; text-align: center; flex: 1 0 auto; height:auto; } .flex-item:before { content:''''; float:left; padding-top:100%; }

un elemento de inline-block también podría hacerlo, solo adapte la visualización / comportamiento del cuadro y su contenido. la magia aquí viene del relleno: 50% 0; (El relleno 100% vertical es igual al ancho del padre). ver w3c sobre margin vertical y padding

Para aquellos que también desean usar display: flex dentro de los divs cuadrados, debe usar display: table para el elemento :before , de lo contrario, el cuadrado funcionará con Chrome pero no con Firefox o Edge (a partir de Firefox 47 y Borde 13).

En el siguiente fragmento, que debería funcionar para todos los navegadores, también demuestro cómo envolver elementos ilimitados con columnas de porcentaje (en este caso, 20%) y separarlos con relleno y divisiones internas, ya que los márgenes con porcentajes no funcionan correctamente en FF y por supuesto Edge.

.flex-container { display: flex; justify-content: start; flex-wrap: wrap; } .flex-cell { flex: 0 0 20%; display: flex; justify-content: center; align-items: stretch; padding: 0.5rem; box-sizing: border-box; } .flex-cell:before { content: ''''; display: table; padding-top: 100%; } .flex-item { flex-grow: 1; border: 1px solid black; background: tomato; color: white; display: flex; justify-content: center; align-items: center; }

Seguramente es bueno usar flexboxes, pero la solución mencionada tiene una falta de flexibilidad incluso si usa flexboxes . No puede ajustar una flotante de cajas. Usted está obligado a establecer el número de cuadros por fila antes.

En esta solución, puede adaptar un ancho dinámico de mosaicos / cuadrados y flotarlos como desee. Si intenta esto con flexboxes, obtendrá un problema con padding-top porque no se orienta en el ancho dado de los bloques que lo contienen.

Solución sin flexboxes pero más flexibilidad:

.flex-container { padding: 0; margin: -5px; font-size: 0; font-family: Helvetica, Arial, sans-serif; } .flex-item { position: relative; display: inline-block; height: 0; width: 100%; padding-top: 100%; height: auto; font-size: 20px; color: white; font-weight: bold; text-align: center; } @media (min-width: 480px) { .flex-item { width: 33.3333%; padding-top: 33.3333%; } } @media (min-width: 768px) { .flex-item { width: 25%; padding-top: 25%; } } .flex-item-inner { position: absolute; display: flex; justify-content: center; align-items: center; top: 0; bottom: 0; right: 0; left: 0; margin: 10px; background: tomato; }

Enlace al codepen: http://codepen.io/dailysh-it/pen/xOVydO