Flexbox
FlexboxはCSS3で採用されたもので、要素を柔軟に配置できるので複雑なレイアウトも表現できます。floatを使わずに要素を横並びにできる。
親要素を『flexコンテナ』と呼び、その中にある子要素を『flexアイテム』と呼ぶ。
親要素に「display:flex」と指定すれば、『flexコンテナ』として定義することができる。
『flexコンテナ』の子要素は『flexアイテム』となり特にCSSで指定する必要はない。
Flexコンテナで使用するプロパティ
flex-direction 『flexアイテム』の配置方向
- flex-direction:row
- 初期値で、『flexアイテム』は左から右に配置される。
- flex-direction:column
- 『flexアイテム』は上から下に配置さる。
- flex-direction:row-reverse
- 「row」と同じで横に配置されるが、並ぶ順序は「右から左」になる。
- flex-direction:column-reverse
- 「column」と同じで縦に配置されるが、並ぶ順序は「下から上」にる。
flex-wrap 『flexアイテム』の折り返し設定
- flex-wrap:nowrap
- 初期値で、『flexアイテム』の折り返しなし、「単数行」
- flex-wrap:wrap
- 『flexアイテム』は折り返しを許可、「複数行」
- flex-wrap:wrap-reverse
- 「wrap」と同じで、折り返し地点が逆になる。
justify-content 水平方向の揃え方
- justify-content:flex-start
- 横配置の場合、「左揃え」、縦配置の場合、「上揃え」になる。
- justify-content:flex-end
- 横配置の場合「右揃え」、縦配置の場合「下揃え」になる。
- A
- B
- C
- D
- E
- justify-content:center
- 「中央揃え」
- A
- B
- C
- D
- E
- justify-content:space-between
- 均等に間隔を空ける。
- A
- B
- C
- D
- E
- justify-content:space-around
- 「space-between」と同じく均等に間隔を空けるが、左右の端のFlexアイテムにも半分ずつ間隔を空ける。
- A
- B
- C
- D
- E
align-items 垂直方向の揃え方
- align-items:flex-start
- 横配置の場合「上揃え」、縦配置の場合「左揃え」になる。
- align-items:flex-end
- 横配置の場合「下揃え」、縦配置の場合「右揃え」になる。
- align-items:center
- 「中央揃え」
- align-items:space-between
- 均等に間隔を空ける。
- align-items:baseline
- ベースラインを揃えます。
- align-items:stretch
- Flexアイテムの高さが設定されている場合、上下一杯まで広げます。設定されていない場合、コンテンツの一番多いFlexアイテムの高さに合わせて自動的に広げる。
align-content 行の揃え方
「flex-wrap」で「nowrap」以外に設定した場合のみ有効です。複数行になったときの揃え方で、「justify-content」と似ている。
- align-content:flex-start
- 横配置の場合「上揃え」、縦配置の場合「左揃え」になる。
- align-content:flex-end
- 横配置の場合「下揃え」、縦配置の場合「右揃え」になる。
- align-content:center
- 「中央揃え」
- align-content:space-between
- 均等に間隔を空ける。
- align-content:space-around
- 「space-between」と同じく均等に間隔を空ける。違うのは、上下の端の行にも半分ずつ間隔を空けるところ。
Flexアイテムで使用するプロパティ
flex：伸縮性設定全般
- flex-grow:数字;
- 子要素『flexアイテム』の伸びる倍率を設定するもので、数字で指定する。
- 数字が大きいほど幅が広くなる。
- 『Flexコンテナ』に余りがある場合、指定されたプロパティに従い、自動的に伸びて余白を埋める。
- flex-shrink:数字
- 数字が大きいほど幅が狭くなる。
- flex-basis:幅
- 『flexアイテム』の幅を指定する。
- 値に指定できるのは単位を含めた数値と、初期値である『auto』。