verticalmente - centrar texto vertical y horizontal css

Cómo alinear la última fila/línea izquierda en flexbox de varias líneas (8)

Este no es un efecto que querías lograr?

CSS:

.container { display: flex; display: -webkit-flex; display: -moz-flex; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { width: 23%; height: 180px; background: red; margin: 0 1% 20px; }

HTML:

<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

Esta pregunta ya tiene una respuesta aquí:

Flex-box: alinear la última fila con la cuadrícula 23 respuestas

Tengo un problema importante con el diseño de flexbox. Construyo un contenedor con cuadros llenos de imágenes, y decidí usar el diseño de flexbox para justificar el contenido para que se vea como una cuadrícula

Ella es el código:

<div class="container"> <div class="item"></div> <div class="item"></div> ... <div class="item"></div> </div>

y el CSS:

.container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; } .container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

Y todo se ve bien, excepto la última línea / fila, cuando no contiene el mismo número de elementos que otras líneas, centrando elementos y rompió mi efecto de cuadrícula.

http://jsfiddle.net/puz219/7Hq2E/

¿Cómo alinear la última línea / fila al lado izquierdo?

Lo he comprobado y funcionó mejor en mi herramienta de edición de HTML.

el guion debe ser el camino

Parte de CSS

.envase {
pantalla: flexión;
pantalla: -webkit-flex;
pantalla: -moz-flex;
justificar-contenido: espacio-alrededor;
-webkit-justify-content: space-around;
-moz-justificar-contenido: espacio-alrededor;
flex-flow: envoltura de fila;
-webkit-flex-flow: ajuste de fila;
-moz-flex-flow: envoltura de fila;
}
.container .item {width: 130px; altura: 180px; fondo: verde margen: 0 1% 24px; }

Parte HTML

<div class="container"> <div class="item"><a href=''google.com''>Google</a></div> <div class="item"><a href=''google.com''>Yahoo</a></div> <div class="item"><a href=''google.com''>Bing</a></div> </div> <div class="container"> <div class="item"><a href=''google.com''>Google</a></div> <div class="item"><a href=''google.com''>Yahoo</a></div> <div class="item"><a href=''google.com''>Bing</a></div> </div>

Lo tengo. (Creo) (esta es mi primera contribución aquí!)

Imagina un diseño que necesita tener 4 imágenes por fila. w: 205 h: 174 Problema: Usar justify-content: space-around, si la última fila no tiene 4 imágenes (tiene 3, 2 o 1), no respetarían la cuadrícula, se extenderían. Asi que.

Cree en el html 3 divs con la clase "filling-empty-space-childs" de esta manera.

.filling-empty-space-childs { width:205px; /*the width of the images in this example*/ height:0; /*Important! for the divs to collapse should they fall in a new row*/ }

El contenedor flexbox tiene pantalla: flex / flex-wrap: wrap; / justify-content: espacio-alrededor

La última fila puede tener 4, 3, 2, 1 imágenes. 4 imágenes: no hay problema, estos tres divs colapsarían en una nueva fila ya que no tienen altura. 3 imágenes: no hay problema, un div estará en la misma fila, invisible, y los otros dos se ajustarán a una nueva fila, pero se colapsarán ya que no tienen altura. 2 imágenes: no hay problema, dos divs van a estar en la misma fila, invisibles, el resto ... se ha colapsado 1 imagen: no hay problema, los tres div se van a llenar en el espacio.

No especificó si necesita ser 100% sensible, pero algo como esta técnica funciona.

Use un contenedor por fila y limítelo con un ancho mínimo, también agregue elementos ocultos para que el cálculo funcione:

HTML

<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item empty"></div> <div class="item empty"></div> </div>

CSS

.container { display: flex; display: -webkit-flex; display: -moz-flex; justify-content: space-around; -webkit-justify-content: space-around; -moz-justify-content: space-around; flex-flow: row wrap; -webkit-flex-flow: row wrap; -moz-flex-flow: row wrap; min-width:580px; background:rgba(00,00,00,0.5); } .container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px; } .container .item.empty{opacity:0;}

Aquí está el ejemplo .

Pensé que este ejemplo podría ser útil para cualquiera que quisiera múltiples elementos y permitir la capacidad de respuesta, los elementos de la cuadrícula cambian según el tamaño de la ventana gráfica. No usa niños invisibles, todo se hace a través de css.

Podría ayudar a alguien que intenta alinear elementos a la izquierda cuando la última fila tiene menos elementos y requieren que la página responda.

http://codepen.io/kunji/pen/yNPVVb

HTML de muestra

<div class="main-container"> <div class="main-items-container"> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> <div class="item-container"> <h2>Item Name</h2> </div> </div> </div>

CSS de muestra

.main-container { max-width: 1000px; min-width: 300px; margin: 0 auto; padding: 40px; box-sizing: border-box; border: 1px solid #000; } .main-items-container { display: -ms-flexbox; display: flexbox; display: -webkit-flex; display: -ms-flex; display: flex; padding: 0; margin: 10px 0; list-style: none; width: auto; -webkit-flex-flow: row wrap; justify-content: flex-start; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: stretch; align-items: stretch; box-sizing: border-box; } @media (min-width: 971px) { .item-container { margin: 10px 2%; width: 22%; padding: 10px; border: 1px solid #000; box-sizing: border-box; } .item-container:nth-child(4n+1) { margin-left: 0; } .item-container:nth-child(4n) { margin-right: 0; } } @media (min-width: 550px) and (max-width: 970px) { .item-container { margin: 10px 2.50%; width: 30%; padding: 10px; border: 1px solid #000; box-sizing: border-box; } .item-container:nth-child(3n+1) { margin-left: 0; } .item-container:nth-child(3n) { margin-right: 0; } } @media (max-width: 549px) { .item-container { margin: 10px 0; width: initial; padding: 10px; border: 1px solid #000; box-sizing: border-box; } }

Puede usar el margin-right:auto en el elemento flex del último hijo.

El problema aquí es que perderá el espacio entre las propiedades de la izquierda para este elemento flexible.

¡Espero eso ayude!

Puede utilizar flexbox con max-width (se eliminan los prefijos del proveedor):

.container { display: flex; width: 100%; justify-content: space-around; flex-direction: row; flex-wrap: wrap; } .column { flex: 1 0 33.333%; max-width: 33.333%; }

Y el HTML

<div class="container"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>

Ver en CodePen: http://codepen.io/anon/pen/gpwEJW

Desafortunadamente esto no es posible con flexbox.

La mejor alternativa es agregar a los niños invisibles ''rellenando'' los ''bloques'' vacíos en la última fila. De esa manera, el elemento real, visible, se alinea a la izquierda.