Pregunta Centrar alinear el contenedor y alinear los elementos secundarios


Tengo un número de X imágenes (todas de la misma altura y ancho), y quiero mostrarlas en una página web. Pero quiero hacer que la página muestre automáticamente la cantidad máxima de imágenes en una fila (sin cambiar el tamaño de las imágenes) cuando se cambia el tamaño del navegador, y para mostrar las imágenes a una distancia fija.

Además, las imágenes se deben agrupar en el centro de la página y se muestran una detrás de la otra.

p.ej. Cuando la ventana del navegador es lo suficientemente amplia como para mostrar 3 imágenes en una fila, se deben mostrar de la siguiente manera.

3 imágenes por fila agrupadas juntas a una distancia fija, en el centro de la página, una detrás de la otra. enter image description here

Y si el navegador se hace más ancho para que se puedan mostrar 4 imágenes en una fila, deberían mostrarse de esa manera.

4 imágenes por fila (sin cambiar el tamaño de las imágenes), agrupadas juntas una distancia fija, en el centro de la página, una detrás de la otra. enter image description here

Hasta ahora he escrito el siguiente código:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

Entonces las imágenes se muestran en línea con un relleno de 10px dentro de un div (inner-div) que luego se centra dentro del div externo. Y las imágenes están alineadas con el texto a la izquierda dentro del div interno.

Pero el problema es que se muestran de la siguiente manera:

enter image description here 

Y de la siguiente manera cuando el navegador se hace más amplio enter image description here

¿Alguien puede mostrarme cómo mostrar las imágenes como el primer conjunto de imágenes?

es decir, el número máximo de imágenes por fila (sin cambiar el tamaño de las imágenes), una después de otra, agrupadas juntas en el centro de la página, distancia fija (envuelta).


32
2017-10-17 23:37


origen


Respuestas:


No hay una manera fácil de lograr el diseño con CSS simple hasta donde yo sé. El siguiente enfoque utiliza consultas de medios para establecer el ancho de los divs internos para diferentes tamaños de ventanas.

Considere usar Javascript si tiene un número bastante grande de elementos, los preprocesadores CSS también pueden ser útiles.

Ver fragmento de código y comentarios en línea, también echa un vistazo a la Ejemplo jsfiddle para pruebas fáciles

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>


11
2017-10-18 00:19



Número máximo de imágenes por fila (sin cambiar el tamaño de las imágenes), una después de otra, agrupadas juntas en el centro de la página, distancia fija (envuelta).

Esa fue una muy buena pregunta. Parece muy simple al principio, pero el resultado óptimo es difícil de lograr.

Realmente no creo que haya una manera de lograr el comportamiento esperado sin usar consultas de medios.

Sin embargo, haciendo uso de algunas consultas de medios y conociendo exactamente el ancho de las imágenes y el máximo posible número de imágenes por fila podemos resolver el problema usando display: inline-* propiedades basadas


pantalla: bloque en línea

Debe admitir navegadores antiguos, ya que está disponible desde CSS2. Tenemos que usar un pequeño truco para evitar la representación de un espacio en blanco no deseado entre los elementos.

El truco es establecer la propiedad de CSS font-size: 0.


pantalla: en línea-flex

Esta solución hace uso del CSS flexboxy es una buena opción para los navegadores modernos.


pantalla: tabla en línea

Compatible desde CSS2 también y sin trucos necesarios para que funcione.


pantalla: en línea

El resultado final no es el esperado por el autor, ya que los elementos en la segunda fila estarán alineados en el centro y no alineados a la izquierda. Lo bueno de esta solución es que funcionará sin conocimiento previo del ancho de la imagen y las consultas de los medios.


.wrapper {
  text-align: center;
}
.inline {
  font-size: 0;
  display: inline;
}
.inline-block {
  display: inline-block;
  font-size: 0;
  text-align: left;
}
.inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
}
.inline-table {
  display: inline-table;
  text-align: left;
}
.item {
  margin: 10px;
}
@media (max-width: 240px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 120px;
  }
}
@media (min-width: 241px) and (max-width: 360px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 240px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 360px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 480px;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 600px;
  }
}
@media (min-width: 721px) and (max-width: 840px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 720px;
  }
}
<h1>display: inline-block</h1>

<div class="wrapper">

  <div class="inline-block">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-flex</h1>

<div class="wrapper">

  <div class="inline-flex">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-table</h1>

<div class="wrapper">

  <div class="inline-table">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline</h1>

<div class="wrapper">

  <div class="inline">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>


9
2017-10-23 03:56



Aquí hay una solución genérica que puede funcionar para usted y para otros.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    margin: 0 auto;              /* center container */
    width: 1000px;
    padding-left: 0;             /* remove list padding */
    list-style-type: none;
    font-size: 0;                /* remove inline-block white space;
                                    see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 60px;             /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }

MANIFESTACIÓN

Re: Flexbox: Aunque flexbox es una herramienta increíble, no es la mejor solución para este problema en particular. Explica mi razonamiento aquí: Cómo centrar un contenedor flexible pero elementos flexibles de alineación izquierda 


6
2017-10-27 00:58



Creo que, dada la multitud de posibilidades de CSS, esta es una solución bastante elegante y multiusos con un código mínimo.

El siguiente fragmento contiene todo el CSS necesario y viene con un extenso comentario. Lo mejor es ejecutarlo en modo 'página completa'. Inicialmente cambia el tamaño de tu navegador hasta 'rcb 1' tiene 6 columnas. Luego comience a desplazarse y cambiar el tamaño para ver los diversos efectos.

A primera vista, puede que no lo sepa, pero este código simple tiene mucho potencial como galería, tira de película, scrollbox (tanto vertical como horizontal), etc.

Si bien quizás no sea una solución al 100% de la pregunta, ¡estoy bastante satisfecho con el resultado!

¡Por favor, échale un vistazo y da tu apreciado comentario!

-Apéndice-: esta solución ha sido probada para que funcione con:

  • Android 5+: navegador predeterminado
  • Windows7-x32: Google Chrome (46+), Firefox (41+), Firefox DE (43+) y IE11 +

ACTUALIZACIÓN 20/11/15 Algunas modificaciones de código, ver comentarios.

/* A few initial globals I always use */
html, body           { box-sizing: border-box; height: 100%; width: 100%; 
                       margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after { box-sizing: inherit }
body                 { max-width: 100%; margin: 0 auto }


/*******************************/
/*     The important code      */
/*******************************/
.rcb { /* [MANDATORY] Main Responsive Component Box container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    width: 100%;        /* Maximum width within parent element */
    height: auto;       /* Adjust height to child element needs */
    padding: 15px       /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */
}
.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */
    flex: 1 1;          /* add auto or 0, or add some min required width (fiddle away!) */
    min-width:  165px;  /* best value is a multiple or division of 330px for all types of devices */
    max-width:  100%;   /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes */
}
.rcb-cmp-item img {
    display: block }    /*  -Add 11/20/15 - remove the gap below image elements 
                           (by default, IMG is an inline element and causes bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/* [OPTIONAL] Media Queries to keep box sizes within reasonable limits (corrected for 8px margin) */
@media all and (min-width:  721px)  { .rcb-cmp-item { max-width: calc(33% - 16px) } }
@media all and (min-width:  991px)  { .rcb-cmp-item { max-width: calc(25% - 16px) } }
@media all and (min-width: 1321px)  { .rcb-cmp-item { max-width: calc(20% - 16px) } }

/*******************************/
/* That's it, the rest is demo */
/*******************************/

/* which you can replace with your own */
body                    { font-family: Lato; background-color: rgba(96,125,139,1); /* bluegrey 500*/
                          color: rgba(255,255,255,.87); font-size: 1vmax; line-height: 1.3vmax; }
h3,        
.rcb-cmp-list h4        { text-align: center }

.rcb-cmp-item           { background-color: #ffc107;
                          color: rgba(0,0,0,.87)  /* amber 500 */;
                          padding: 4px; /* -update 11/20/15 - see add of ".rcb-cmp-item img" */
                          border-radius: 2px }
.rcb-cmp-item,
.rcb-cmp-item p img     { box-shadow: 0px 2px 2px  0px rgba(0, 0, 0, 0.14), 
                                      0px 3px 1px -2px rgba(0, 0, 0, 0.20),
                                      0px 1px 5px  0px rgba(0, 0, 0, 0.12) }

.rcb-cmp-item p img     { vertical-align: middle }
.rcb-cmp-item p         { font-weight: 400; letter-spacing: 0 }

.rcb-cmp-item iframe    { border: none }
<h3>rcb 1</h3>
    <div id="rcb-control-1" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">200x200 rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
        </div>
    </div>

    <h3>rcb 2</h3>
    <div id="rcb-control-2" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">300x150 oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized  oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x50"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500x250"></div></div>
        </div>
    </div>
    
    <h3>rcb 3</h3>
    <div id="rcb-control-3" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">portrait 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
    
            <h4 class="rcb-cmp-item">landscape 16:9</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
    
            <h4 class="rcb-cmp-item">mixed 16:9 - 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
        </div>
    </div>
    
    <h3>rcb 4</h3>
    <div id="rcb-control-4" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">odd ones out</h4>
            <div class="rcb-cmp-item">empty rcb-cmp</div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">empty rcb-cmp-item-cnt</div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>While I used a few oddly shaped images in this demo, on average most images will have ratio 3:2, 4:3 or 16:9</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><iframe src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0"></iframe><h4>live media</h4></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">this is some text div with a <a href="javascript:void(0)">clickable anchor</a></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>this is some paragraph with a <a href="javascript:void(0)">clickable anchor</a> and a tiny image <img src="http://dummyimage.com/35"> somewhere inside</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/257x133"></div></div>
        </div>
    </div>


1
2017-10-24 01:53



No es necesario que hagas ningún trabajo complejo aquí, ¡solo ponlo!

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left !important;
    display: inline;
}

"! importante" funcionará en esta situación


0
2017-10-29 11:44



No tengo tiempo para mejorar lo que sigue, pero espero que pueda ayudarte de alguna manera. ¡Muchos casos están cubiertos! ¡Utiliza Flexbox si estás buscando una solución PureCSS!

.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.flex-item:last-child { margin-right: auto }


/** IGNORE FOLLOWING **/
.flex-container {
  padding: 1em;
  border: 1px solid black;
  margin: 0 0 1em 0;
}
.box {
  width: 100px;
  height: 100px;
  visibility: visible;
  margin: 15px;
}

.size-lg { width: 90% }
.size-sm { width: 60% }
.size-xs { width: 40% }

.size-lg .box { background-color: yellow; }
.size-sm .box { background-color: yellow; }
.size-xs .box { background-color: yellow; }
<div class="flex-container size-lg">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-sm">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-xs">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>


0
2017-10-29 13:20



Creo que tengo una solución.

Tratando .inner como un bloque en línea, puede usar text-align: center para mantener el grupo de elementos en el medio de un div de ancho del 100%. Lo cual se escala muy bien.

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
}

.item {
    display: inline-block;
    float: left;
    margin: 5px;
    width: 100px;
    height: 100px;
}

Get'fiddle con esto: http://jsfiddle.net/sLz2ok92/2/


-1
2017-10-28 19:27