flexbox(フレックスボックス)のプロパティ

フレックスコンテナ(親要素)に設定するプロパティ一覧と簡単な説明

  • display・・・「display: flex;」を親に設定して子要素の並び方を決定します。
    ※インラインブロックにしたい場合はflexではなくinline-flexを指定します。
  • flex-direction ・・・子要素が並んでいく方向を決定します。(rowは右に向かって、columnは下に向かって並んで行きます。row-reverseやcolumn-reverseもあります。rowが初期値。)
  • flex-wrap ・・・子要素が折り返すかどうかを決定します。(wrapで折り返す、nowrapで折り返さない(初期値))
  • justify-content ・・・flex-directionで決定した方向軸に子要素がどのように並ぶかを決定します。(flex-startで開始方向に詰めて並ぶ、flex-endで終了方向に詰めて並ぶ、centerで中央に並ぶ、space-betweenで要素間の余白を均等に空けて並ぶ、space-aroundは子要素の左右の余白を均等に空けて並ぶ)
  • align-items ・・・flex-directionで決定した方向軸に対して垂直な方向への各要素の配置を決定します。
  • align-content ・・・複数行のフレックスコンテナの行が垂直な方向へどのように並ぶかを決定します。

フレックスアイテム(子要素)に設定するプロパティ一覧と簡単な説明

  • align-self ・・・align-itemsを個別のフレックスアイテムに対して指定します。
  • flex-basis ・・・フレックスアイテムの本来の大きさを決定します
  • flex-grow ・・・フレックスコンテナにポジティブマージンが発生した時にアイテムがそのマージンを自身の大きさとしてどれくらいとりこんで大きくなるかを決定します。
  • flex-shrink ・・・フレックスコンテナにネガティブマージンが発生した時にアイテムがそのマージンを自身の大きさとしてどれくらいとりこんで小さくなるかを決定します。
  • order ・・・他のフレックスアイテムとの並び順の順番を決定します。

参考サイト

詳しくはここで勉強しましょう。

CSS フレックスボックスレイアウト | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

CSS リファレンス | MDN
http://developer.mozilla.org/ja/docs/Web/CSS/Reference#Keyword_index

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です