プロパティの紹介の続きです。前回、前々回の記事もぜひご覧ください。
今回は絶対使うメチャクチャ便利なFlexボックスについて紹介しています！
display
displayは要素のブロック要素、インライン要素の指定や、子要素のレイアウト方法を指定します。
.box {
/* ブロック要素に指定する */
display: block;
}- 値には
block、inline、flex、none等のキーワードを指定します。 blockの場合は、ブロック要素となり、inlineの場合は、インライン要素になります。noneの場合は、要素が表示されなくなります。flexについては次のセクションで紹介します。
Flexボックス
ブロック要素を横並びにしたいとき、古くは<table>要素で表形式にしたり、floatプロパティを適用するなどしていましたが、どちらもスタイル指定が複雑でした。
このFlexボックスを使えば(今までに比べて)メチャクチャ簡単に横並びが指定できます！
まずは横並びにしたい子要素達(フレックスアイテム)を一つの親要素(フレックスコンテナ)で囲み、その親要素に下のcssを指定します。
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>.flex-container {
/* 子要素を横並びにする */
display: flex;
}これだけでいいかんじの横並びになります。
あとはここから並び方を指定していくだけです。justify-contentとalign-itemsだけで、おおよそのスタイリングが可能ですよ！
水平方向の並び方
justify-contentは子要素の水平方向の並び方を指定します。
.flex-container {
/* 水平方向の中央に寄せる */
justify-content: center;
}指定する値によって次のようになります。
| 指定する値 | 子要素への効果 |
|---|---|
flex-start | 先頭に寄せる |
center | 中央に寄せる |
flex-end | 末尾に寄せる |
space-between | 両端の子要素は端に寄せて、均等に配置する |
space-around | 両端の子要素の外側に半分の間隔を空け、均等に配置する |
space-evenly | 両端の子要素の外側に同じだけの間隔を空け、均等に配置する |
垂直方向の並び方
align-itemsは子要素の垂直方向の並び方を指定します。
子要素が複数行になるときは、各行での垂直方向に対しての並び方の指定になります。
.flex-container {
/* 子要素を垂直方向の中央に寄せる */
align-items: center;
}指定する値によって次のようになります。
| 指定する値 | 子要素への効果 |
|---|---|
flex-start | 先頭に寄せる |
center | 中央に寄せる |
baseline | 各要素のベースラインを揃える |
flex-end | 末尾に寄せる |
stretch | 親要素に合わせて伸縮する |
垂直方向の並び方(子要素個別指定)
align-selfは子要素に指定することで、align-itemsの動作を上書きすることができます。
.flex-item {
/* 該当する要素のみを垂直方向の末尾に寄せる */
align-self: flex-end;
}指定する値によって次のようになります。
| 指定する値 | 効果 |
|---|---|
auto | 親要素のalign-itemsの値に従う(初期値) |
flex-start | 先頭に寄せる |
center | 中央に寄せる |
baseline | 各要素のベースラインを揃える |
flex-end | 末尾に寄せる |
stretch | 親要素に合わせて伸縮する |
垂直方向の並び方(折り返しがあるとき)
align-contentは折り返しがあるときの、子要素全体の垂直方向の並び方を指定します。
※次に紹介するflex-wrapがwrapに指定されているときに有効です。
全ての行に対し、垂直方向のどこに寄せるかの指定になります。
.flex-container {
/* 子要素全体を垂直方向の先頭に寄せる */
align-content: flex-start;
}指定する値によって次のようになります。
| 指定する値 | 子要素への効果 |
|---|---|
flex-start | 先頭に寄せる |
center | 中央に寄せる |
flex-end | 末尾に寄せる |
space-between | 両端の子要素は端に寄せて、均等に配置する |
space-around | 両端の子要素の外側に半分の間隔を空け、均等に配置する |
space-evenly | 両端の子要素の外側に同じだけの間隔を空け、均等に配置する |
stretch | 子要素を均等に配置し、親要素に合わせて伸縮する |
折り返し
flex-wrapは子要素を並べた時に、折り返すかを指定します。
.flex-container {
/* 子要素を折り返す */
flex-wrap: wrap;
}指定する値により次のようになります。
| 指定する値 | 子要素への効果 |
|---|---|
nowrap | コンテナ幅を超えても折り返さない。表示が崩れる場合あり。(初期値) |
wrap | コンテナ幅を超える場合は折り返し表示する。 |
wrap-reverse | 下部から子要素を並べて、コンテナ幅を超える場合は折り返し表示する。 |
並べる方向
flex-direction は、子要素を並べる方向を指定します。
値にcolumn、column-reverseを指定した場合は、前述のjustify-contentは"垂直方向"の並び指定となり、align-items、align-self、align-contentは"水平方向"の並び指定となります。
.flex-container {
/* 子要素を水平方向に並べる */
flex-direction: row;
}指定する値により次のようになります。
| 指定する値 | 子要素への効果 |
|---|---|
row | 水平方向へ並べます(初期値) |
row-reverse | 水平方向へ並べ、子要素の並びを逆にします |
column | 垂直方向へ並べます |
column-reverse | 垂直方向へ並べ、子要素の並びを逆にします |
子要素の寸法
flexは子要素にそれぞれ指定し、兄弟間での寸法を指定します。
.flex-item {
/* 該当する要素の寸法割合を指定 */
flex: 1;
}| 指定する値 | 効果 |
|---|---|
initial | 自分のwidth、heightで寸法が決まり、コンテナサイズによって縮小することがありますが、伸長はしません。(初期値) |
auto | コンテナサイズによって、伸長、縮小します |
none | 自分のwidth、heightで寸法が決まり、伸長・縮小しません。 |
| 単位なしの整数 | 兄弟要素間で単位なしの整数を指定することで、その割合に応じて寸法を計算します。 |
まとめ
多くの場面で、justify-contentとalign-itemsさえ抑えておけば大体のスタイリングができるはずです。
ちょっと特殊なスタイリングがしたくなったらこの記事を見返してみてください！！
次の記事
CSSの挙動とレスポンシブ化について簡単に紹介しています！