display:flex

リストの並びをコントロールできる、display:flex機能の備忘録

ベースHTML

<ul class='flex'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

基本

.flex,
.flex > *{
  list-style:none;
  margin:0;
  padding:0;
}

.flex{
  display:flex;
  gap:10px;
}

.flex > *{
  background-color:red;
  color:white;
  padding:20px;
}

itemの縦中心に配置する

align-items:center;

リストを縦並びにする

flex-direction:column;

item同士の間隔を作る

gap:10px;