flex boxの基本の使い方

2022-01-19

flex boxで横並びにするには

flex boxには、コンテナとアイテムが必要。

コンテナとは大枠（ulなど）アイテムは中身（liなど）

※コンテナ要素がない場合はdivで作る

使い方の例

クラスをそれぞれつける

      <ul class="books">
        <li class="book">横並び左</li>
        <li class="book">横並び中</li>
        <li class="book">横並び右</li>
      </ul>

コンテナにdisplay: flexを使う

.books {
  display: flex;
}

その他を整えていく。

.books {
  display: flex;
  list-style: none;
}
.book {
  background-color: lightgray;
  padding: 10px;
  margin-right:10px;
}