Flexboxって様々なことができるのに全て覚えている人って少ないのではないでしょうか？
そこでFlexboxのプロパティをまとめてみました。
Flexboxの使い方
まずはFlexboxの使い方から
よく使う横並びの方法
flexbox.html
<divclass="container"><divclass="item">子要素 1</div><divclass="item">子要素 2</div><divclass="item">子要素 3</div></div>親要素にあたるcontainerにdisplya: flexbox;を指定してあげるだけです。
flexbox.css
.container{display:flex;}これで子要素が横並びになるはずです。
Flexboxのプロパティ一覧
Flexboxには親要素にかけれるものと子要素にかけれるものの２種類あります。
まずは親要素にかけれるプロパティから。
親要素に指定するプロパティ
| プロパティ | 効果 | 使える値 |
|---|---|---|
| flex-direction | 子要素の並ぶ向きを指定することができる |
|
| flex-wrap | 子要素の折り返しを指定することができる |
|
| flex-flow | flex-directionと、flex-wrapをまとめて指定することができる(ショートハンド・プロパティ ) | - |
| justify-content | 横並びの位置を指定することができる |
|
| align-items | 縦並びの位置を指定することができる |
|
| align-content | 複数行になった時に縦並びの位置を指定することができる |
|
子要素に指定するプロパティ
| プロパティ | 効果 | 使える値 |
|---|---|---|
| order | 並び順を指定をすることができる | 初期値は0。 マイナス値を含む数値のみ指定することができる |
| flex-grow | 子要素が画面幅に満たない場合に伸びる比率を指定することができる | 数値のみ指定することができる。 初期値は0。 マイナス値は無効 |
| flex-shrink | 子要素が画面幅より小さい場合に縮む比率を指定することができる | 数値のみ指定することができる。 初期値は1。 マイナス値は無効 |
| flex-basis | 子要素の基準幅を指定することができる | パーセントやピクセル値で指定することができる 初期値はautoでautoと指定した場合は子要素のコンテンツのサイズが適応される。 |
| flex | flex-growと、flex-shrink、flex-basisをまとめて指定できる(ショートハンド・プロパティ) | - |
| align-self | 子要素の縦方向を指定することができる |
|
共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。