Jak wyśrodkować pojemnik elastyczny, ale wyrównać elementy elastyczne do lewej

Chcę, aby elementy flex były wyśrodkowane, ale gdy mamy drugą linię, aby mieć 5 (z obrazka poniżej) poniżej 1 i nie wyśrodkowane w rodzicu.

Oto przykład tego, co mam:

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/

Wyzwanie i ograniczenia dotyczące Flexbox

Wyzwaniem jest wyśrodkowanie grupy elementów elastycznych i wyrównanie ich w lewo na zawijaniu. Ale jeśli nie ma stałej liczby pudełek w rzędzie, a każde pudełko ma stałą szerokość, nie jest to obecnie możliwe w przypadku Flexbox.

Korzystając z kodu zamieszczonego w pytaniu, moglibyśmy utworzyć nowy kontener flex, który otacza obecny kontener flex ( ul), co pozwoliłoby nam wyśrodkować ulz justify-content: center.

Następnie elementy flex ulmożna wyrównać do lewej z justify-content: flex-start.

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

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

Tworzy to wyśrodkowaną grupę elementów elastycznych wyrównanych do lewej.

Problem z tą metodą polega na tym, że przy pewnych rozmiarach ekranu będzie luka po prawej stronie ul, przez co nie będzie już wyglądać na wyśrodkowaną.

Dzieje się tak, ponieważ w układzie flex (a właściwie ogólnie w CSS) kontener:

1. nie wie, kiedy element się zawija;
2. nie wie, że zajmowane wcześniej miejsce jest teraz puste, i
3. nie oblicza ponownie swojej szerokości, aby zawijać węższy układ.

Maksymalna długość odstępu po prawej stronie to długość elementu elastycznego, którego oczekiwał kontener.

W poniższym demo, zmieniając rozmiar okna w poziomie, możesz zobaczyć pojawianie się i znikanie białych znaków.

PRÓBNY

Bardziej praktyczne podejście

Żądany układ można osiągnąć bez użycia flexboxa inline-blocki zapytań o media .

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://stackoverflow.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; } }

Powyższy kod renderuje kontener wyśrodkowany w poziomie z elementami potomnymi wyrównanymi do lewej, takimi jak ten:

PRÓBNY

Inne opcje

• Prawidłowe dopasowanie rozmiaru i wyrównanie elementów elastycznych w ostatnim rzędzie

• Desandro Masonry

  Masonry to biblioteka układu siatki JavaScript. Działa poprzez umieszczanie elementów w optymalnej pozycji w oparciu o dostępną przestrzeń pionową, podobnie jak murarz dopasowujący kamienie do ściany. Prawdopodobnie widziałeś go w użyciu w całym Internecie.

  ^{źródło: http://masonry.desandro.com/}

• Moduł układu siatki CSS Poziom 1

  Ten moduł CSS definiuje dwuwymiarowy system układu oparty na siatce, zoptymalizowany pod kątem projektowania interfejsu użytkownika. W modelu układu siatki elementy podrzędne kontenera siatki można umieścić w dowolnych gniazdach we wstępnie zdefiniowanej siatce układu o stałym lub elastycznym rozmiarze.

  ^{źródło: https://drafts.csswg.org/css-grid/}

Możesz to osiągnąć za pomocą siatki CSS, po prostu użyj repeat(autofit, minmax(width-of-the-element, max-content))

ul {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
       grid-gap: 16px;
       justify-content: center;
       padding: initial;
}

li {
    list-style-type: none;
    border: 1px solid gray;
    padding: 5px;
    width: 210px;
}

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

http://jsfiddle.net/rwa20jkh/

Jak zasugerował @michael, jest to ograniczenie w obecnym flexboksie. Ale jeśli nadal chcesz używać flexi justify-content: center;, możemy to obejść, dodając lielement fikcyjny i przypisując 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); 

Sprawdź to skrzypce (zmień rozmiar i zobacz) lub wideo w celach informacyjnych

Jednym ze sposobów uzyskania pożądanego stylu z marginesami jest wykonanie następujących czynności:

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

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}

Możesz umieścić niewidoczne elementy z tą samą klasą co pozostałe (usunięte np. Na potrzeby wystawy) i wysokością ustawioną na 0. Dzięki temu będziesz mógł wyrównać pozycje na samym początku siatki.

Przykład

<div class="table-container">
  <div class="table-content">
    <p class="table-title">Table 1</p>
    <p class="mesa-price">$ 20</p>
  </div>
  
  <!-- Make stuff justified start -->
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
</div>

Wynik

Napotkałem ten problem podczas kodowania w React Native. Jest eleganckie rozwiązanie, które możesz mieć używając FlexBox. W mojej konkretnej sytuacji próbowałem wyśrodkować trzy pola flex (Flex: 2) wewnątrz innego za pomocą alignItems. Rozwiązanie, które wymyśliłem, polegało na użyciu dwóch pustych s, każdy z Flex: 1.

<View style={{alignItems: 'center', flexWrap: 'wrap', flexDirection: 'row'}}>
  <View style={{flex: 1}} />
    // Content here
  <View style={{flex: 1}} />
</View>

Wystarczająco łatwe do konwersji na web / CSS.