justificar - cómo centrar el texto en html

Cómo centrar un contenedor flexible pero alinear a la izquierda los artículos flexibles

Question

Quiero que los elementos flexibles estén centrados, pero cuando tenemos una segunda línea, tener 5 (de la imagen a continuación) debajo de 1 y no centrados en el padre.

Aquí hay un ejemplo de lo que tengo:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

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

http://jsfiddle.net/8jqbjese/2/

Answer 1

Flexbox Challenge & Limitation

El desafío es centrar un grupo de elementos flexibles y alinearlos a la izquierda en la envoltura. Pero a menos que haya un número fijo de cuadros por fila, y cada cuadro tenga un ancho fijo, esto actualmente no es posible con flexbox.

Usando el código publicado en la pregunta, podríamos crear un nuevo contenedor flexible que envuelva el contenedor flexible actual ( ul ), lo que nos permitiría centrar el ul con justify-content: center .

Luego, los elementos flex de la ul podrían alinearse a la izquierda con justify-content: flex-start .

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

Esto crea un grupo centrado de elementos flexibles alineados a la izquierda.

El problema con este método es que, en ciertos tamaños de pantalla, habrá un espacio a la derecha del ul , por lo que ya no aparecerá centrado.

Esto sucede porque en el diseño flexible (y, en realidad, CSS en general) el contenedor:

1. no sabe cuándo se ajusta un elemento;
2. no sabe que un espacio previamente ocupado ahora está vacío, y
3. no recalcula su ancho para reducir el diseño más estrecho.

La longitud máxima del espacio en blanco a la derecha es la longitud del elemento flexible que el contenedor esperaba estar allí.

En la siguiente demostración, al cambiar el tamaño de la ventana horizontalmente, puede ver el espacio en blanco ir y venir.

DEMO

Un enfoque más práctico

El diseño deseado se puede lograr sin flexbox utilizando inline-block y las consultas de medios .

HTML

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

CSS

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

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@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; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

El código anterior representa un contenedor centrado horizontalmente con elementos secundarios alineados a la izquierda como este:

DEMO

Otras opciones

• Dimensionar y alinear correctamente los elementos flexibles en la última fila

• Albañilería Desandro

  Masonry es una biblioteca de diseño de cuadrícula de JavaScript. Funciona colocando los elementos en una posición óptima según el espacio vertical disponible, algo así como piedras de albañil en una pared. Probablemente lo haya visto en uso en todo Internet.

  ^{fuente: http://masonry.desandro.com/}

• Módulo de diseño de cuadrícula CSS Nivel 1

  Este módulo CSS define un sistema de diseño bidimensional basado en la cuadrícula, optimizado para el diseño de la interfaz de usuario. En el modelo de diseño de cuadrícula, los elementos secundarios de un contenedor de cuadrícula se pueden colocar en ranuras arbitrarias en una cuadrícula de diseño predefinida de tamaño flexible o fijo.

  ^{fuente: https://drafts.csswg.org/css-grid/}

Answer 2

Como sugirió @michael, esta es una limitación con el flexbox actual. Pero si aún quiere usar flex y justify-content: center; , entonces podemos solucionar esto agregando un elemento li simulado y asignando margin-left .

    const handleResize = () => {
        const item_box = document.getElementById(''parentId'')
        const list_length  = item_box.clientWidth
        const product_card_length = 200 // length of your child element
        const item_in_a_row = Math.round(list_length/product_card_length)
        const to_be_added = item_in_a_row - parseInt(listObject.length % item_in_a_row) // listObject is the total number items
        const left_to_set = (to_be_added - 1 ) * product_card_length // -1 : dummy item has width set, so exclude it when calculating the left margin 
        const dummy_product = document.querySelectorAll(''.product-card.dummy'')[0]
        dummy_product.style.marginLeft = `${left_to_set}px`
    }
    handleResize() // Call it first time component mount
    window.addEventListener("resize", handleResize); 

Verifique este violín (cambie el tamaño y vea) o el video como referencia