preview-css3logo

flexbox のプロパティが未だに覚えられません
毎回ググるのですが、初心者向けのなが~い解説ページで
使ったことある人向けの簡単なプロパティ名とその値の一覧が
欲しかったので作ってみました 

flex に並べたい要素たちの親要素に
display: flex;
を指定します

親が flexbox のコンテナ その子要素は flexbox のアイテムです

コンテナのプロパティ

flex-direction

向き

row横に並ぶ (inline-blockみたい) (デフォルト)
column縦並ぶ (blockみたい)
row-reverse横に逆順で並ぶ
column-reverse縦に逆順に並ぶ

flex-wrap

折り返し

nowrap折り返さない (デフォルト)
wrap折り返す
wrap-reverse折り返すけど逆方向に折り返す

wrap-reverse は
かきくけこ
あいうえお
のようになります

flex-flow

上のふたつをまとめて

flex-flow: row nowrap;
flex-flow: column-reverse wrap-reverse;

など

justify-content

text-align みたいなもの(direction が row のとき)

flex-start普通に左もしくは上にくっつく (text-align:left;) (デフォルト)
flex-end逆で右もしくは下にくっつく (text-align:right;)
center中央 (text-align:center;)
space-between余白は各要素の間に間隔あける 最初と最後は端にくっつく
space-aroundspace-between に加えて両端も間隔あける

align-items

vertical-align みたいなもの(direction が row のとき)

flex-start普通に上もしくは左にくっつく(vertical-align:top;)
flex-end逆で下もしくは右にくっつく(vertical-align:bottom;)
center中央(vertical-align:middle;)
baselineベースラインに合わせる(vertical-align:baseline;)
stretch親要素に合わせていっぱいまで広げる (デフォルト)

align-content

複数行(列)のときの 行(列)配置

flex-start普通に左もしくは上にくっつく (text-align:left;) (デフォルト)
flex-end逆で右もしくは下にくっつく (text-align:right;)
center中央 (text-align:center;)
space-between余白は各要素の間に間隔あける 最初と最後は端にくっつく
space-aroundspace-between に加えて両端も間隔あける
stretch親要素に合わせて各行(列)をいっぱいまで広げる

一行(列)しかないとき (nowrap にしてるとき) は関係ないプロパティです

アイテムのプロパティ

flex-grow

数値を指定

どれだけサイズ大きくするか
アイテム間の数値の差でどのアイテムを優先的に大きくするか決まります

flex-shrink

数値を指定

どれだけサイズを小さくするか

flex-basis

サイズを指定

基本のサイズ

flex

上の 3 つをまとめて指定

flex: 0 0 auto;
flex: 1 3 200px;

など

align-self

align-items をアイテム個別に設定

flex-start普通に上もしくは左にくっつく(vertical-align:top;)
flex-end逆で下もしくは右にくっつく(vertical-align:bottom;)
center中央(vertical-align:middle;)
baselineベースラインに合わせる(vertical-align:baseline;)
stretch親要素に合わせていっぱいまで広げる (デフォルト)

order

表示順を並び替え

1 から始まる順番の数値を指定