При использовании центровки во Flexbox - "съедаются" первые элементы

Question

Появилась задача: выстроить все колонки в 1 ряд без переносов - с расчетом на горизонтальную прокрутку страницы.

Использовал флексбокс, и вроде всё хорошо было - пока не решил добавить центрирование justify-content: center для больших экранов. Тогда на маленьких первые блоки начали съедаться.

С чем это связано и как это побороть?

PS: Желательно без медиазапросов (для универсальности).

https://codepen.io/AleLit/pen/ZEJPZoG

.main {
  display: flex;
  gap: 10px;
  justify-content: center; /* начинают "съедаться" первые блоки  */
}
.inner {
  min-width: 250px;
  background: #743e1e;
  height: 150px;
  color: #fff;
  font-size: 50px;
}

 <div class="main">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
   <div class="inner">5</div>
   <div class="inner">6</div>
   <div class="inner">7</div>
   <div class="inner">8</div>
   <div class="inner">9</div>
   <div class="inner">10</div>
</div>

Answer 1

Нужен промежуточный флекс-блок. Ему передаём свойства gap и justify-content. И добавляем flex-grow: 1, чтобы растягивался до ширины экрана.

А внешний блок просто остаётся флексом, чтобы у промежуточного flex-grow действовал.

https://codepen.io/glebkema/pen/VwzJdpz

/* суть дела */
.main {
  display: flex;
}
.middle {
  display: flex;
  flex-grow: 1;
  justify-content: center; 
}

/* для красоты */
body {
  font-family: Verdana, sans-serif;
}
h4 {
  margin: 12px 0 6px;
}
h4:first-child {
  margin-top: 0;
}
.middle {
  gap: 10px;
}
.inner {
  background: #369;
  color: #fff;
  font-size: 24px;
  height: 45px;
  min-width: 180px;
  padding: 3px 12px;
}

<h4>Если мало элементов, то они по центру:</h4>
<div class="main">
  <div class="middle">
    <div class="inner">1</div>
    <div class="inner">2</div>
  </div>
</div>

<h4>А если много, то прокручиваем страницу:</h4>
<div class="main">
  <div class="middle">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
  </div>
</div>

Answer 2

Вариант с использованием display: grid

.main {
  display: grid;
  justify-content: center;  
  margin-bottom: 10px;
}

.outer {
  display: grid;
  grid-template-columns: repeat(auto-fit, 250px);  
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
}

.inner {
  min-width: 250px;
  background: #743e1e;
  height: 150px;
  color: #fff;
  font-size: 50px;
}

<div class="main">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
  </div>
</div>
<div class="main">
  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
  </div>
</div>

Answer 3

Старый добрый margin: auto видимо уже не в моде...

Если нужно прокручивать страницу:

.main {
  margin: 10px auto;
  display: flex;
  gap: 10px;
  width: min-content;
}

.inner {
  min-width: 250px;
  background: #743e1e;
  height: 70px;
  color: #fff;
  font-size: 50px;
}

<div class="main">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
</div>

<div class="main">
  <div class="inner">1</div>
  <div class="inner">2</div>
</div>

Если нужно прокручивать блок:

.main {
  margin: 10px auto;
  display: flex;
  gap: 10px;
  max-width: max-content;
  width: 100%;
  overflow: auto;
}

.inner {
  min-width: 250px;
  background: #743e1e;
  height: 70px;
  color: #fff;
  font-size: 50px;
}

<div class="main">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
  <div class="inner">5</div>
</div>

<div class="main">
  <div class="inner">1</div>
  <div class="inner">2</div>
</div>

БЛОГ НА HUSL

При использовании центровки во Flexbox - "съедаются" первые элементы

Ответы (3 шт):