flexboxまとめ①

css

floatを使わずにもっと簡単にコンテンツを並べたい
そんな時に便利なのがflexboxです

サンプルコード

<ul class="container">
    <li>リスト１</li>
    <li>リスト２</li>
    <li>リスト３</li>
</ul>

.container{
          display : flex;
}

本来なら縦並びになるリストも
これだけで横並びになります。

左右の位置揃えにはjustify-contentプロパティ

値には以下のようなものがあります

  • flex-start / flexアイテムを左揃え(初期値)
  • flex-end / flexアイテムを右揃え
  • center / flexアイテムを左右中央揃え
  • space-between / flexアイテムを最初と最後の要素はコンテナの端につけ等間隔配置
  • space-around / flexアイテムをコンテナの端と間も等間隔配置

上下の位置揃えにはalign-itemsプロパティ

値には以下のようなものがあります

  • stretch / flexコンテナの高さいっぱいにflexアイテムを設置（初期値）
  • flex-start / flexアイテムを上揃え
  • flex-end / flexアイテムを下揃え
  • center / flexアイテムを上下中央揃え
  • baseline / flexアイテム内の文字のベースラインに揃えて配置

flexアイテムの並び順にはflex-directionプロパティ

値は以下のようなものがあります

  • row / flexアイテムは左から右へ配置されます
  • row-reverse / flexアイテムは右から左へ配置されます
  • column / flexアイテムは上から下へ配置されます
  • column-reverse / flexアイテムは下から上へ配置されます

とても便利なflexboxを使いこなしましょう。