HTML CSS Flexboxとは

要素を並べるのにfloat: left;使ってるけど、他にも並べる方法ないかなあ :thinking:

参考サイト→https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox1
随時更新します

Flexboxを使ってみよう

FlexboxとはFlexible Box Layout Moduleの略。左から順に並べられるのは勿論、右からや下からなど自由に要素をレイアウト出来る。

基本

flex_box01.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>ブロックとインライン</title><linkrel="stylesheet"href="css/flex_box01.css"></head><body><divclass="container01"><divclass="item">アイテム&ensp;1
    </div><divclass="item">アイテム&ensp;2
    </div><divclass="item">アイテム&ensp;3
    </div><divclass="item">アイテム&ensp;4
    </div></div></body></html>

flex_box01.css

.container01{display:flex;}.item{margin:10px10px;padding:2px4px;background:#f8dcdc;}

display: flex;を親要素に適用し、子要素が横に並んだ。

Flexboxで親要素に指定するプロパティ

htmlは上と同じ。

flex-direction: row;

flex_box02.css

.container01{display:flex;flex-direction:row;}.item{~省略~}

右から左へ並ぶ

flex-direction: row-reserve;

flex_box03.css

.container01{display:flex;flex-direction:row-reverse;}.item{~省略~}

左から右へ並ぶ

flex-direction: column;

flex_box04.css

.container01{display:flex;flex-direction:column;}.item{~省略~}

上から下へ並ぶ

flex-direction: column-reverse;

flex_box05.css

.container01{display:flex;flex-direction:column-reverse;}.item{~省略~}

下から上へ並ぶ

flex-wrap: nowrap;

説明のために数を増やした

flex_box02.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><title>ブロックとインライン</title><linkrel="stylesheet"href="css/flex_box.css"></head><body><divclass="container02"><divclass="item">アイテム&ensp;1
    </div><divclass="item">アイテム&ensp;2
    </div><divclass="item">アイテム&ensp;3
    </div><divclass="item">アイテム&ensp;4
    </div><divclass="item">アイテム&ensp;5
    </div><divclass="item">アイテム&ensp;6
    </div><divclass="item">アイテム&ensp;7
    </div><divclass="item">アイテム&ensp;8
    </div><divclass="item">アイテム&ensp;9
    </div><divclass="item">アイテム&ensp;10
    </div></div></body></html>

flex_box06.css

body{~省略~}.container02{margin:10pxauto;display:flex;flex-wrap:nowrap;}.item{~省略~}

折り返しなしで一行で並ぶ

flex-wrap: wrap;

flex_box06.css

body{~省略~}.container02{margin:10pxauto;display:flex;flex-wrap:wrap;}.item{~省略~}

子要素が折り返して複数行になり、上から下へ並ぶ

flex-wrap: wrap-reverse;

flex_box07.css

body{~省略~}.container02{margin:10pxauto;display:flex;flex-wrap:wrap-reverse;}.item{~省略~}

子要素が折り返して複数行になり、下から上へ並ぶ

flex-flow: ;

flex_box08.css

.container02{margin:10pxauto;display:flex;flex-flow:row-reversenowrap;}

flex-directionとflex-wrapを一行で指定できるプロパティ。

justify-content: flex-start;

flex_box09.css

.container02{margin:10pxauto;display:flex;justify-content:flex-start;}

10個だと分かりにくかったので5個にした。親要素に空いているスペースがあるとき、子要素を水平方向のどの位置に置くか指定。
flex-startは左揃えになる。

justify-content: flex-end;

flex_box10.css

.container02{margin:10pxauto;display:flex;justify-content:flex-end;}

flex-endは右揃えになる

justify-content: flex-center;

flex_box11.css

.container02{margin:10pxauto;display:flex;justify-content:flex-center;}

flex-centerは中央揃えになる

justify-content: space-between;

flex_box12.css

.container02{margin:10pxauto;display:flex;justify-content:space-between;}

最初の子要素を左端、最後の子要素を右端に配置し、残りの要素は均等に間隔をあけて配置