Flex-box 親要素に指定するプロパティ
よく使うFlexboxですが、時々、あれ?思う通りにいかないってことがあったりするので、いまいちどチートシートを参考に勉強。
参照
クリエイターボックスさんのチートシート
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet
基本の書き方
・ Flexコンテナー(親要素)
・Flexアイテム(子要素)
.container Flexコンテナー
.item Flexアイテム1
.item Flexアイテム2
.item Flexアイテム3
.item Flexアイテム4
Flexコンテナー(親要素)に指定するプロパティ
・ display:flex;
・ flex-direction
子要素の並ぶ向きを指定する
・ flex-wrap
こ要素を一行もしくは折り返して複数行に配置するかどうかを指定する
子要素が親要素の幅に収まらなくなった場合、折り返して複数行に配置される
・ justify-content
水平方向の揃えを指定する
justify-content:flex-start(初期値)
左揃え
justify-content:space-between
最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
・ align-items
垂直方向の揃え
align-items:stretch
親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
align-items:flex-start
親要素の開始位置から配置。上揃え。
・ align-content
複数行にした時の揃えを指定する
※flex-wrap: nowrap;
が適応されていると子要素が一行になるので、align-content は無効になる。
Author And Source
この問題について(Flex-box 親要素に指定するプロパティ), 我々は、より多くの情報をここで見つけました https://qiita.com/natsu_mikan/items/03ab685f96b6af446cb8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .