CSS: `display: flex`で横並びにした要素をモバイルサイズの場合に縦並びにする方法MEMO

display: flexで横並びにした要素をモバイルサイズの場合に縦並びにするときにいい感じのやり方を探して、少しハマったのでメモ📝

結論としては以下の通りモバイルサイズの時だけflex-direction: column;を指定すれば横並びが縦並びになる🤩

.items {
  display: flex;
  justify-content: center;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

CodePen

See the Pen `display: flex`でモバイルサイズの場合に縦並びにする by madogiwa (@madogiwa0124) on CodePen.

flexbox便利ですねー✍️

developer.mozilla.org