Flexコンテナに指定できるプロパティ

flex-wrap

アイテムを1行に配置するか折り返しするか。

折り返ししたければ flex-wrap: wrap;

code: sample.css

.flex-container {

display: flex;

flex-wrap: wrap;

}

justify-content

左右方向の配置を指定

余白のとり方

justify-content: space-between;

横並びアイテムを3カラムにする場合、最後の行が端揃えになってしまう

start 左寄せ

end 右寄せ

align-content

複数行に配置したときのアイテムの上下位置の指定

単数行の場合は効果がない

align-items

アイテムの上下位置の指定

余白のとり方を決める

align-items: stretch; で Flex アイテムの height: 100%

align-items: center; で上下方向中央揃え

Flexアイテムに書ける align-self の一括指定

flex-direction

配置の向きを指定

flex-direction: row

行のテキストの方向に配置

flex-direction: row-reverse

row と同様だが、逆向き

flex-direction: column

積み重なるように配置する

flex-direction: column-reverse

column と同様だが、逆向き

初期値は row

ショートハンド

flex

flex-grow, flex-shrink, flex-basis のショートハンド

flex-flow

flex-direction, flex-wrap のショートハンド