[HTML]サムネイルを横並びにする場合に、サムネイル群が横幅MAXでない場合は中央揃え、横幅を超える場合は左揃えにしてスクロールありにする方法

mayatasomayataso

ダメなパターン

クリティカルな部分以外は省略します。

.flexbox {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  width: 800px;
}

この場合、2つの問題がある。

  1. 中央揃えになるが、スクロールが発生する場合に左揃えにならない
  2. 画面右に隠れた要素はスクロールで表示できるが、画面左端（0pixcel目）より左側に伸びた要素は途切れてしまう

解決方法

index.scss
.wrapper {
  text-align: center;
  .flexbox {
    display: inline-flex;
    justify-content: flex-start;
    overflow-x: auto;
    max-width: 800px;
  }
}
index.html
<div class="wrapper">
  <div class="flexbox">
    <!-- サムネイルのimg要素たち -->
  </div>
</div>

要点は2つ

  1. display: inline-flex; および max-width: 800px; によりFlexBoxのサイズを可変にする
  2. ラッパーを用意し、text-align: center; で中央揃えにする