図で理解する Flexbox

Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"

[ifttt]

みんなわかりにくいと思ってるせいか、気づいたらChromeのDevToolsで図示されるようになったの笑った

[yarumato]

“CSSのFlexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧”

[muneking]

#direban

[mayumayu_nimolove]

これなかなか覚えられないのよね。で、覚えなく てもできるようになったのでもう覚える気がない。

[kns_1234]

“図で理解するFlexbox”

[lilpacy]

"align-content・justify-contentはplace-contentプロパティで一括指定できます"