FlexBox
あ
い
う
え
お
<div style="width:3rem;height:3rem">あ</div>
<div style="width:3rem;font-size:0.5rem">い</div>
<div style="width:3rem;height:6rem;font-size:2rem">う</div>
<div style="width:3rem">え</div>
<div style="width:3rem;height:2rem">お</div>
<div style="width:3rem;font-size:0.5rem">い</div>
<div style="width:3rem;height:6rem;font-size:2rem">う</div>
<div style="width:3rem">え</div>
<div style="width:3rem;height:2rem">お</div>
フレックスコンテナのプロパティ
- display:flex
-
display:flex; 中の要素をフレックスボックスアイテムにする
通常フロー あいうえお<div>
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>デフォルト(display:flexのみ指定) あいうえお<div style="display:flex">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div> - flex-direction
-
flex-direction:row(初期値) | row-reverse | column | column-reverse; アイテムを並べる方向と順序-横|横を逆順に|縦|縦を逆順に
flex-direction:row-reverse あいうえお<div style="display:flex; flex-direction:row-reverse">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>flex-direction:colomn-reverse あいうえお<div style="display:flex; flex-direction:colomn-reverse">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div> - justify-content
-
justify-content:flex-start(初期値) | flex-end | center | space-between | space-around; 左揃え|右揃え|中央揃え|両端揃えでボックスの間に余白|ボックスの周囲に余白
justify-content:flex-start(初期) あいう<div style="display:flex; justify-content:flex-start">
<div>あ</div>
<div>い</div>
<div>う</div>
</div>justify-content:flex-end あいう<div style="display:flex; justify-content:flex-end">
<div>あ</div>
<div>い</div>
<div>う</div>
</div>justify-content:center あいう<div style="display:flex; justify-content:center">
<div>あ</div>
<div>い</div>
<div>う</div>
</div>justify-content:space-between あいう<div style="display:flex; justify-content:space-between">
<div>あ</div>
<div>い</div>
<div>う</div>
</div>justify-content:space-around あいう<div style="display:flex; justify-content:space-around">
<div>あ</div>
<div>い</div>
<div>う</div>
</div> - flex-wrap
-
flex-wrap:nowrap(初期値) | wrap | wrap-reverse; flexboxが横に溢れたときに折り返すかどうか。
wrap-reverseは折り返しを上に積み上げる形で行う。
flex-wrap:nowrap あいうえお<div style="display:flex; flex-wrap:nowrap">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>flex-wrap:wrap あいうえお<div style="display:flex; flex-wrap:wrap">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>flex-wrap:wrap-reverse あいうえお<div style="display:flex; flex-wrap:wrap-reverse">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div> - align-content
-
align-content: stretch(初期値) | flex-start | flex-end | center | space-between | space-around ; コンテンツを引き延ばす(初期値)|上揃え|下揃え|中央揃え|ボックス間に余白|周囲に余白
align-content:stretch;(初期値) あいうえお<div style="display:flex; flex-wrap:wrap; align-content:stretch">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>align-content:flex-start; あいうえお<div style="display:flex; flex-wrap:wrap; align-content:flex-start">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>align-content:flex-end; あいうえお<div style="display:flex; flex-wrap:wrap; align-content:flex-end">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>align-content:center; あいうえお<div style="display:flex; flex-wrap:wrap; align-content:center">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>align-content:space-between; あいうえお<div style="display:flex; flex-wrap:wrap; align-content:space-between">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div>align-content:space-around; あいうえお<div style="display:flex; flex-wrap:wrap; align-content:space-around">
<div>あ</div>
<div>い</div>
<div>う</div>
<div>え</div>
<div>お</div>
</div> - align-items
-
align-items: stretch(初期値) | flex-start | flex-end | center | baseline ; (初期値)|上/左揃え|下/→揃え|中央揃え|文字のベースラインで揃える
align-items:stretch;(初期値) あいうえお<div style="display:flex; align-items:stretch">
<div style="height:3rem">あ</div>
<div style="font-size:0.5rem">い</div>
<div style="height:6rem;font-size:2rem">う</div>
<div>え</div>
<div>お</div>
</div>align-items:flex-start; あいうえお<div style="display:flex; align-items:flex-start">
<div style="height:3rem">あ</div>
<div style="font-size:0.5rem">い</div>
<div style="height:6rem;font-size:2rem">う</div>
<div>え</div>
<div>お</div>
</div>align-content:flex-end; あいうえお<div style="display:flex; align-items:flex-end">
<div style="height:3rem">あ</div>
<div style="font-size:0.5rem">い</div>
<div style="height:6rem;font-size:2rem">う</div>
<div>え</div>
<div>お</div>
</div>align-content:center; あいうえお<div style="display:flex; align-items:center">
<div style="height:3rem">あ</div>
<div style="font-size:0.5rem">い</div>
<div style="height:6rem;font-size:2rem">う</div>
<div>え</div>
<div>お</div>
</div>align-content:baseline; あいうえお<div style="display:flex; align-items:baseline">
<div style="height:3rem">あ</div>
<div style="font-size:0.5rem">い</div>
<div style="height:6rem;font-size:2rem">う</div>
<div>え</div>
<div>お</div>
</div>
フレックスアイテムのプロパティ
- flex-basis
-
flex-basis:アイテムの大きさ; アイテムの基底となる大きさ[auto(初期値),em,rem,px,%など]。auto以外の値を指定したときはwidthやheightに優先する。
flex-basis:[あ-auto、い-2rem、う-40px、え-25%、お-auto] あいうえお<div style="display:flex">
<div style="flex-basis:auto">あ</div>
<div style="flex-basis:2rem">い</div>
<div style="flex-basis:40px">う</div>
<div style="flex-basis:25%">え</div>
<div style="flex-basis:auto">お</div>
</div> - order
-
order:順番; ボックスを並べる順番を指定
order:[あ-3、い-1、う-4、え-5、お-2] あいうえお<div style="display:flex">
<div style="order:3">あ</div>
<div style="order:1">い</div>
<div style="order:4">う</div>
<div style="order:5">え</div>
<div style="order:2">お</div>
</div> - flex-grow
-
flex-grow:拡張比率; コンテナが広がったときに拡大される比率
0のときは大きさ固定。初期値は0。
指定なし あいうえおあいうえお<div style="display:flex">
<div">あ</div>
<div">い</div>
<div">う</div>
<div">え</div>
<div">お</div>
</div>flex-grow:[あ-0、い-0、う-0、え-0、お-0] あいうえおあいうえお<div style="display:flex">
<div style="flex-grow:0">あ</div>
<div style="flex-grow:0">い</div>
<div style="flex-grow:0">う</div>
<div style="flex-grow:0">え</div>
<div style="flex-grow:0">お</div>
</div>flex-grow:[あ-1、い-1、う-1、え-1、お-1] あいうえおあいうえお<div style="display:flex">
<div style="flex-grow:1">あ</div>
<div style="flex-grow:1">い</div>
<div style="flex-grow:1">う</div>
<div style="flex-grow:1">え</div>
<div style="flex-grow:1">お</div>
</div>flex-grow:[あ-3、い-1、う-4、え-5、お-2] あいうえおあいうえお<div style="display:flex">
<div style="flex-grow:3">あ</div>
<div style="flex-grow:1">い</div>
<div style="flex-grow:4">う</div>
<div style="flex-grow:5">え</div>
<div style="flex-grow:2">お</div>
</div>flex-grow:[あ-3、い-1、う-4、え-5、お-2] あいうえおあいうえお<div style="display:flex;flex-direction:column">
<div style="flex-grow:3">あ</div>
<div style="flex-grow:1">い</div>
<div style="flex-grow:4">う</div>
<div style="flex-grow:5">え</div>
<div style="flex-grow:2">お</div>
</div> - flex-shrink
-
flex-shrink:縮小比率; コンテナが狭まったときに縮小される比率。
0のときは大きさ固定。初期値は1。
指定なし あいうえおあいうえお<div style="display:flex">
<div">あ</div>
<div">い</div>
<div">う</div>
<div">え</div>
<div">お</div>
</div>flex-shrink:[あ-0、い-0、う-0、え-0、お-0] あいうえおあいうえお<div style="display:flex">
<div style="flex-shrink:0">あ</div>
<div style="flex-shrink:0">い</div>
<div style="flex-shrink:0">う</div>
<div style="flex-shrink:0">え</div>
<div style="flex-shrink:0">お</div>
</div>flex-shrink:[あ-1、い-1、う-1、え-1、お-1] あいうえおあいうえお<div style="display:flex">
<div style="flex-shrink:1">あ</div>
<div style="flex-shrink:1">い</div>
<div style="flex-shrink:1">う</div>
<div style="flex-shrink:1">え</div>
<div style="flex-shrink:1">お</div>
</div>flex-shrink:[あ-3、い-1、う-4、え-5、お-2] あいうえおあいうえお<div style="display:flex">
<div style="flex-shrink:3">あ</div>
<div style="flex-shrink:1">い</div>
<div style="flex-shrink:4">う</div>
<div style="flex-shrink:5">え</div>
<div style="flex-shrink:2">お</div>
</div>flex-shrink:[あ-3、い-1、う-4、え-5、お-2] あいうえおあいうえお<div style="display:flex ;flex-direction:column">
<div style="flex-shrink:3">あ</div>
<div style="flex-shrink:1">い</div>
<div style="flex-shrink:4">う</div>
<div style="flex-shrink:5">え</div>
<div style="flex-shrink:2">お</div>
</div> - flex
-
flex:flex-grow flex-shrink flex-basis; 3つのプロパティをこの順に指定する。
flex:[あ-0 1 auto、い-0 1 auto、う-0 1 auto、え-0 1 auto、お-0 1 auto] あいうえおあいうえおあいうえお<div style="display:flex">
<div style="flex:0 1 auto">あ</div>
<div style="flex:0 1 auto">い</div>
<div style="flex:0 1 auto">う</div>
<div style="flex:0 1 auto">え</div>
<div style="flex:0 1 auto">お</div>
</div>flex:[あ-3 3 auto、い-1 1 auto、う-4 4 auto、え-5 5 auto、お-2 2 auto] あいうえおあいうえおあいうえお<div style="display:flex">
<div style="flex:3 3 auto">あ</div>
<div style="flex:1 1 auto">い</div>
<div style="flex:4 4 auto">う</div>
<div style="flex:5 4 auto">え</div>
<div style="flex:2 2 auto">お</div>
</div>