CSS - как сделать так, чтобы flexbox с обёрткой имел ширину содержимого? - PullRequest
Новая
       110

CSS - как сделать так, чтобы flexbox с обёрткой имел ширину содержимого?

0 голосов
/ 02 мая 2020

Начальная проблема

У меня на странице есть flexbox с квадратными элементами, которые должны быть выровнены в виде сетки в центре страницы. Чтобы добиться этого, я использовал justify-content: center;, и это отчасти сработало, но у него была одна проблема: если последний ряд элементов был не полным, а не сетчатой ​​структурой, последний ряд был смещен.

Мое предлагаемое решение

Мое решение этой проблемы состояло бы в том, чтобы заставить flexbox выравнивать каждый элемент слева и брать ширину его содержимого следующим образом: если 4 элемента могут поместиться в ряд с оставшимся местом, но 5 слишком велики, flexbox становится таким же широким, как 4 элемента (вместо 100% его родительского элемента), а затем переносится на следующую строку. Теперь я могу поместить этот flexbox во внешний div и установить для него text-align: center;.

Как я пытался найти свое решение

Пока я пытался:

  • с использованием display: inline-flex;
  • с использованием width: fit-content; и width: min-content;
  • , объединяющих последние две точки
  • с установкой максимальной ширины - не сработало, потому что я не будет знать заранее, сколько элементов может уместиться и насколько они широкие
  • использовать display: grid; с grid-auto-flow: row; вместо flex - при этом использовался текущий стиль .prodcategory, но по какой-то причине отображался только один элемент в ряд и оставил большую часть пространства пустым. Это также дает тот же макет «один элемент в строке», если из контейнера удалена спецификация width: fit-content;.

Текущий код

HTML / PHP (контейнеры): 

<div id='prodcontainer'>
    <div id='prodcontainercenter'>
        $productcategories
    </div>
</div>

HTML / PHP (элементы, заполненные из массива): 

$productcategories .= "<div class='prodcategory'>
    <img src='$catimages[$i]'></img>
    <span>$cattexts[$i]</span>
</div>";

CSS: 

#prodcontainer
{
    width: 100%;
    text-align: center;
}

#prodcontainercenter
{
    font-size: large;
    width: fit-content;

    display: inline-flex;
    flex-wrap: wrap;
}

.prodcategory
{
    /* this is so I can properly size
     * some inner absolute pos elements*/
    position: relative;

    width: 20%;
    margin: 1em 1em;
    height: 25vh;

    background-color: lightgreen;
}

На основании этой информации, как я могу использовать сетку или flexbox для достижения своей цели?

...