flexBoxの主軸と交差軸についての動画
FlexBoxのプロパティと値をまとめたものです。
FlexBoxもfloatに代わってコンポーネントなどのレイアウトの中心的な存在になってきたと思われます。
ネット上にも団子の串刺しのようなイラストが乱立しているようです。まずはプロパティの動きを覚えましょう。
しかし、FlexBoxのキモはflexプロパティの使いこなしだと思います。flexプロパティの初期値もしっかりと覚えておきましょう。
仕様書をしっかりと読み込むことを忘れないことが大事です。
Container
値の太字は初期値です。
-
flex-directionrow | row-reverse | column | column-reverse
-
flex-wrapnowrap | wrap | wrap-reverse
-
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenly
-
align-itemsstretch | flex-start | flex-end | center | baseline
-
align-contentstretch | flex-start | flex-end | center | space-between | space-around
Item
値の太字は初期値です。
-
align-selfauto | stretch | flex-start | flex-end | center | baseline
-
order0 | integer
-
flex-grow0 | integer
-
flex-shrink1 | integer
-
flex-basisauto | integer
-
flex0 1 auto | int int int
justify-content （flex-direction:rowの場合）
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
align-items （flex-direction:rowの場合）
- flex-start
- flex-end
- center
- stretch
- baseline
Web動画記事一覧
- Slickの導入方法 （動画あり）
- Web作成講座〜FlexBoxレイアウトでヘッダーを作成（動画あり）
- Web作成講座 FlexBoxレイアウトの動画
- Web作成講座 floatレイアウト1（動画あり）
- Web作成講座 floatレイアウト2 （コード解説 動画）
- Web制作講座 Webフォント、inlin-block、marginの相殺について(動画あり）
- Web制作講座 backgroundプロパティの説明(動画あり）
- CSS flex〜チートシート(動画あり)
- FlexBoxの使い方（7）〜 flex-wrapについて（動画あり）
- FlexBoxの使い方（５）〜flexプロパティについて（動画あり）
- FlexBoxの使い方（４）〜display:inline-flexについて（動画あり）
- FlexBoxの使い方（３）〜flexアイテムの順番を入れ替え（動画あり）
- FlexBoxの使い方（１）〜display:flexについて（動画あり）
