--- title: HTML CSS Flexboxとは tags: HTML CSS author: a-takano slide: false --- 要素を並べるのに`float: left;`使ってるけど、他にも並べる方法ないかなあ:thinking: 参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1 随時更新します ##Flexboxを使ってみよう FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。 ###基本 ```flex_box01.html ブロックとインライン
アイテム 1
アイテム 2
アイテム 3
アイテム 4
``` ```flex_box01.css .container01 { display: flex; } .item { margin: 10px 10px; padding: 2px 4px; background: #f8dcdc; } ``` 20191129_Qiita01.png `display: flex;`を親要素に適用し、子要素が横に並んだ。 ###Flexboxで親要素に指定するプロパティ htmlは上と同じ。 ####flex-direction: row; ```flex_box02.css .container01 { display: flex; flex-direction: row; } .item { ~省略~ } ``` 20191129_Qiita02.png 右から左へ並ぶ ####flex-direction: row-reserve; ```flex_box03.css .container01 { display: flex; flex-direction: row-reverse; } .item { ~省略~ } ``` 20191129_Qiita03.png 左から右へ並ぶ ####flex-direction: column; ```flex_box04.css .container01 { display: flex; flex-direction: column; } .item { ~省略~ } ``` 20191129_Qiita04.png 上から下へ並ぶ ####flex-direction: column-reverse; ```flex_box05.css .container01 { display: flex; flex-direction: column-reverse; } .item { ~省略~ } ``` 20191129_Qiita05.png 下から上へ並ぶ ####flex-wrap: nowrap; 説明のために数を増やした ```flex_box02.html ブロックとインライン
アイテム 1
アイテム 2
アイテム 3
アイテム 4
アイテム 5
アイテム 6
アイテム 7
アイテム 8
アイテム 9
アイテム 10
``` ```flex_box06.css body { ~省略~ } .container02 { margin: 10px auto; display: flex; flex-wrap: nowrap; } .item { ~省略~ } ``` 20191129_Qiita06.png 折り返しなしで一行で並ぶ ####flex-wrap: wrap; ```flex_box06.css body { ~省略~ } .container02 { margin: 10px auto; display: flex; flex-wrap: wrap; } .item { ~省略~ } ``` 20191129_Qiita07.png 子要素が折り返して複数行になり、**上から下へ**並ぶ ####flex-wrap: wrap-reverse; ```flex_box07.css body { ~省略~ } .container02 { margin: 10px auto; display: flex; flex-wrap: wrap-reverse; } .item { ~省略~ } ``` 20191203_Qiita01.png 子要素が折り返して複数行になり、**下から上へ**並ぶ ####flex-flow: ; ```flex_box08.css .container02 { margin: 10px auto; display: flex; flex-flow: row-reverse nowrap; } ``` `flex-direction`と`flex-wrap`を一行で指定できるプロパティ。 ####justify-content: flex-start; ```flex_box09.css .container02 { margin: 10px auto; display: flex; justify-content: flex-start; } ``` 20191203_Qiita02.png 10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を**水平方向のどの位置に置くか指定**。 `flex-start`は左揃えになる。 ####justify-content: flex-end; ```flex_box10.css .container02 { margin: 10px auto; display: flex; justify-content: flex-end; } ``` 20191203_Qiita03.png `flex-end`は右揃えになる ####justify-content: flex-center; ```flex_box11.css .container02 { margin: 10px auto; display: flex; justify-content: flex-center; } ``` 20191203_Qiita04.png `flex-center`は中央揃えになる ####justify-content: space-between; ```flex_box12.css .container02 { margin: 10px auto; display: flex; justify-content: space-between; } ``` 20191203_Qiita05.png 最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置