Estoy tratando de crear una cuadrícula de respuesta de los cuadrados. Las aplicaciones deben de tamaño para ajustarse a la ventana de ancho. Las plazas no debe cambiar el tamaño al cambiar el área de visualización de la altura.

Tengo cómo ajustar el ancho de cada cuadrado, pero no sé cómo hacer que los elementos de la plaza y de cómo ampliar su altura cuando el ancho de ventana de los cambios.

En el ejemplo en el que el violín debajo de la de siete plazas debe ajustarse siempre en horizontal, y se debe escala como cuadrados. No me importa cuántas filas visibles.

Violín aquí http://jsfiddle.net/gonyhvz8/11/

<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>

.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;
}
InformationsquelleAutor Moto | 2015-03-27

6 Comentarios

  1. 86

    no debe establecer cualquier tamaño.
    usted puede usar un elemento adicional o un pseudo elemnt con relleno vertical en %. esto permitirá el uso de ancho como de referencia : un fragmento de código para mostrar:

    CSS:

    .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%;
    }

    HTML:

    <body>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    </body>

    un inline-block elemento podía hacer demasiado, acaba de adaptar la visualización del comportamiento de la caja y su contenido. la magia aquí viene de relleno:50% 0; (100% relleno vertical es igual a la anchura de los padres). ver w3c sobre la vertical margen y relleno

    • Parece que hemos tenido muy similares ideas. Usted mencionó que el truco está padding: 50% 0 pero en realidad estás usando padding-top: 100%. Funcionalmente equivalentes, pero incompatible con lo que en el código.
    • tal vez me respondió muchas veces sobre el tema,. lo que yo digo es relleno vertical o margen utiliza el ancho de los padres como de referencia de acuerdo a la especificación de W3C. así mixe de 100% y 0, o 75 y 25 no importa mucho el tiempo que usted entiende cómo funciona para hacer un cuadrado. esta diferencia escrito es a propósito. si esto se entiende claramente, el siguiente paso es mantener una relación que puede no ser cuadrada , no importa el ancho 😉 útil fuente : w3.org/TR/CSS2/box.html#margin-properties , w3.org/TR/CSS2/box.html#padding-properties
    • No es un problema. Estoy totalmente de entender que cualquier combinación adición de hasta el 100% de trabajo. Sólo pensé que podría ser confuso para alguien que no entiende de esto que usted dijo que el truco estaba en uso padding: 50% 0 cuando el código no era exactamente. Si que fue intencional, entonces eso está bien, sólo podría haber sido la forma en la que he leído lo que hizo parecer confuso.
    • bueno, voy a hacer un poco confuso, en fin, necesita un poco de la excavación por lo que podría ser recordado , mi hábito con las personas que trabajan conmigo. Una vez que lo tienes, que preste atención a lo que digo y cavar e incluso a veces me muestran cómo puedo estar equivocado o fuera de fecha 😉
    • Funciona muy bien, gracias! Relacionadas con la pregunta: dado que la altura está determinada por el pseudo elemento parece que no me puedo vertical de alinear el texto dentro de las plazas… Alguna sugerencia?
    • siguió el violín enlace jsfiddle.net/gonyhvz8/15 (inline-block)
    • impresionante, muchas gracias!
    • Tenga en cuenta que esta saltos en Firefox (no en Chrome), cuando los hijos del contenedor flex se dan display: flex sí mismos. Ver violín jsfiddle.net/d562oL7w Quitar el display: flex declaración en el flex elementos para ver la diferencia.
    • supongo que usted necesita para dar una altura demasiado si desea sqaures. lo que ocurre es que el relleno-parte superior :antes de flex elemento viene a ser unefficient causa que no se ve la anchura de alguna manera (en FF), jsfiddle.net/d562oL7w/1
    • Para el «.flex-elemento:antes de la» regla de considerar la sustitución de «float:left;» con «display:block;».
    • esto es lo que el último violín se acerca con una altura fija desde flex-niño no «ver» su propio ancho y hace obsoleto el relleno vertical si % valor se utiliza 😉
    • Recuerdo la lectura de que los flotadores son más intensivo de la cpu y por lo tanto otra solución w/o flota es deseable.

  2. 25

    Para aquellos que también quieren usar display: flex el interior de la plaza de divs, usted necesita usar display: table para la :before elemento, de lo contrario la plaza trabajará con Chrome pero no funciona con Firefox o con el Borde (como el de Firefox 47 y Borde 13).

    En el fragmento siguiente, que debería funcionar para todos los navegadores, yo también demostrar cómo envolver ilimitado de elementos con un porcentaje de columnas (en este caso 20%) y por separado con el relleno y el interior de la vid, desde los márgenes con los porcentajes no funcionan correctamente en FF y por supuesto Borde.

    CSS:

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

    HTML:

    <body>
    <div class="flex-container">
    <div class="flex-cell">
    <div class="flex-item">1</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">2</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">3</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">4</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">5</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">6</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">7</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">8</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">9</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">10</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">11</div>
    </div>
    <div class="flex-cell">
    <div class="flex-item">12</div>
    </div>
    </div>
    </body>

    • you need to use display: table for the :before element muy corto y agradable solución, gracias.
    • Esto debe ser aceptado respuesta. pantalla: para la tabla :antes de que elemento es la única solución de trabajo!
    • esto no funciona si el cuadro tiene contenido que es más alto que ancho.
  3. 19

    La habitual truco para mantener la relación de aspecto es utilizar el hecho de que los valores de porcentaje de margen y/o relleno de la parte superior & parte inferior se calculan en función de la anchura del elemento de contención, y no la altura.

    Se puede ver un no-flex versión de esta pregunta AQUÍ

    Sin embargo, le gustaría tener flex acuerdo con la anchura de sus elementos, no se establece un porcentaje basado anchos. Por eso, he venido para arriba con una variación de este enfoque, que va a trabajar con flex:

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

    El truco aquí es el uso de la :before pseudo-elemento para insertar un 0 ancho del elemento con un padding-top de 100%. Que el 100% es el 100% de la anchura, es decir, este elemento con contenido no será tan alto como su contenedor. Esto estirará el flex-elemento a la misma altura que su anchura:

    Además, usted tendrá que quitar el definido por la altura de tu flex-contenedor o la altura no puede crecer. También es posible que desee agregar min-width: 1.5em de modo que sus elementos no disminuyen por debajo de la altura del carácter que tiene en cada plaza.

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

    CSS:

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

    HTML:

    <body>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    </body>

    • simplemente hermoso. gracias
    • Muchas gracias! Yo como no-flex versión 🙂
  4. 2

    Seguramente es agradable de usar flexboxes, pero la solución se menciona que la falta de flexibilidad incluso se utiliza flexboxes. No son capaces de ajustar un flotante de cajas. Usted se limita a establecer el número de cajas por fila antes.

    En esta solución se puede adaptar una dinámica de ancho de baldosas/plaza y flotar como te gusta. Si usted intenta esto con flexboxes, usted recibirá un problema con padding-top porque no orientar sobre la anchura de la que contiene los bloques.

    Solución sin flexboxes pero más flexibilidad:

    CSS:

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

    HTML:

    <body>
    <div class="flex-container">
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    1
    </div>
    </div>
    </div>
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    2
    </div>
    </div>
    </div>
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    3
    </div>
    </div>
    </div>
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    4
    </div>
    </div>
    </div>
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    5
    </div>
    </div>
    </div>
    <div class="flex-item">
    <div class="flex-item-inner">
    <div class="flex-item-inner-content">
    6
    </div>
    </div>
    </div>
    </div>
    </body>

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

    • Usted no está utilizando flexbox para el contenedor como el cartel original quería. También, de hecho, puede especificar la cantidad de elementos por fila con flexbox, si quieres. Sólo el uso de flex-wrap: film y dejar con la de los elementos con flex: 0 0 33%, por ejemplo.
  5. 2

    Hay una forma para hacerlo sin más elementos html también. He creado un violín con su base de http://jsfiddle.net/octavioamu/kq97pm3L/ pero la garrapata es utilizar después de elemento con pantalla de visualización de la tabla de

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

    Se puede utilizar en cualquier red, por ejemplo un cuadrado en el interior de una columna de cuadrícula con bootstrap…
    Aquí está una sass mixin trabajar en el interior de un % de columna de cuadrícula https://codepen.io/octavioamu/pen/xzeXGm

    Y aquí es con el código:

    CSS:

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

    HTML:

    <body>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    </div>
    </body>

  6. 0

    Versión simplificada de la G-Cyr Respuesta del

    CSS:

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

    HTML:

    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    </div>
    <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    </div>

    Resultado

    css cuadrícula de cuadrados con flexbox

Dejar respuesta

Please enter your comment!
Please enter your name here