横並びを行うために、float
属性を使用した方法を学んだことがある人は多いのではないでしょうか?
実は、この float
より遥かに簡単に 横並び を行える方法があります。それも、float
にはできなかったような多くのレイアウトを実現できる機能をもっています。
それが今回学習する Flexbox(フレックスボックス)です。
この Flexbox を使用することができれば、Webサイトのレイアウトがぐんとしやすくなるはずです。
今回の学習内容
float
が必要な場面
テキストの折返し
例えば、画像の周りでテキストを折り返すような場合は float
を使用する必要があります。
以下のように、雑誌や新聞のようなレイアウトを表現しようとすれば必要になります。
Flexboxが未対応
Flexbox は float
に比べて新しい CSSです。
そのため、古いブラウザには対応していないことがあります。
ただ、この古いブラウザを使用しているユーザーは全体の0%に近いので、無視してもいい数値だと思います。
-
float
でなければならない場合を除くと、Flexbox の方が簡単に表現できます。
Flexboxとは
Flexboxの例
display: flex;
を親要素に適用
デフォルトでは親要素に flex-direction: row;
が適用されるため、子要素が横並びとなります。
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-horizontal {
-ms-flex-direction: row; /* IE */
flex-direction: row;
}
</style>
<ul class="flex flex-horizontal">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の子要素の伸縮
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-1 {
-ms-flex: 1 1 0.000000001px; /* IE */
flex: 1;
flex-basis: 0.000000001px; /* IE */
}
</style>
<ul class="flex">
<li>1</li>
<li class="flex-1">2</li>
<li>3</li>
<li>4</li>
</ul>
子要素の縦方向表示
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-vertical {
-ms-flex-direction: column; /* IE */
flex-direction: column;
}
</style>
<ul class="flex flex-vertical">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
縦方向の子要素の伸縮
伸縮させるために縦幅 height
の指定が必要です。
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-vertical {
-ms-flex-direction: column; /* IE */
flex-direction: column;
}
.flex-1 {
-ms-flex: 1 1 0.000000001px; /* IE */
flex: 1;
flex-basis: 0.000000001px; /* IE */
}
</style>
<ul class="flex flex-vertical" style="height: 300px;">
<li>1</li>
<li class="flex-1">2</li>
<li>3</li>
<li>4</li>
</ul>
伸縮率
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-1 {
-ms-flex: 1 1 0.000000001px; /* IE */
flex: 1;
flex-basis: 0.000000001px; /* IE */
}
.flex-2 {
-ms-flex: 2; /* IE */
flex: 2;
}
.flex-3 {
-ms-flex: 3; /* IE */
flex: 3;
}
</style>
<ul class="flex">
<li>1</li>
<li class="flex-1">2</li>
<li class="flex-3">3</li>
<li class="flex-2">4</li>
</ul>
デフォルトの伸縮
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
</style>
<ul class="flex" style="height: 100px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
縦方向の中央寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-center {
-ms-flex-align: center; /* IE */
align-items: center;
}
</style>
<ul class="flex flex-center" style="height: 100px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
縦方向の先頭寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-start {
-ms-flex-align: start; /* IE */
align-items: flex-start;
}
</style>
<ul class="flex flex-start" style="height: 100px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
縦方向の末尾寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-end {
-ms-flex-align: end; /* IE */
align-items: flex-end;
}
</style>
<ul class="flex flex-end" style="height: 100px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の先頭寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-start-justified {
-ms-flex-pack: start; /* IE */
justify-content: flex-start;
}
</style>
<ul class="flex flex-start-justified">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の中央寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-center-justified {
-ms-flex-pack: center; /* IE */
justify-content: center;
}
</style>
<ul class="flex flex-center-justified">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の末尾寄せ
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-end-justified {
-ms-flex-pack: end; /* IE */
justify-content: flex-end;
}
</style>
<ul class="flex flex-end-justified">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の子要素の等間隔配置
- 1
- 2
- 3
- 4
最初の子要素は先頭に寄せ、最後の子要素は末尾に寄せます。
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-equal-justified {
-ms-flex-pack: justify; /* IE */
justify-content: space-between;
}
</style>
<ul class="flex flex-equal-justified">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
横方向の子要素の等間隔配置(先頭末尾に間隔あり)
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-around-justified {
-ms-flex-pack: distribute; /* IE */
justify-content: space-around;
}
</style>
<ul class="flex flex-around-justified">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
子要素ごとの指定
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-self-start {
-ms-align-self: flex-start; /* IE */
align-self: flex-start;
}
.flex-self-center {
-ms-align-self: center; /* IE */
align-self: center;
}
.flex-self-end {
-ms-align-self: flex-end; /* IE */
align-self: flex-end;
}
.flex-self-stretch {
-ms-align-self: stretch; /* IE */
align-self: stretch;
}
</style>
<ul class="flex" style="height: 120px;">
<li class="flex-self-start">1</li>
<li class="flex-self-center">2</li>
<li class="flex-self-end">3</li>
<li class="flex-self-stretch">4</li>
</ul>
子要素の折返し
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-wrap {
-ms-flex-wrap: wrap; /* IE */
flex-wrap: wrap;
}
</style>
<ul class="flex flex-wrap" style="width: 160px;">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
逆方向の表示
この例では横方向のアイテムの表示順序を逆からに設定しています。縦方向の逆方向の表示の場合は、値を column-reverse
に変更してください。
また、Flexboxで順序を変更した場合、これはあくまでも表示の順序を変えただけで HTMLタグ の順序そのものを変えるものではありません。
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.flex-horizontal-reverse {
-ms-flex-direction: row-reverse; /* IE */
flex-direction: row-reverse;
}
</style>
<ul class="flex flex-horizontal-reverse">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
表示順を指定
子要素の表示順序を指定します。
order
の値の昇順で並べ替えが行われます。初期値は 0 で、マイナス値を含む整数値を設定できます。
またこちらも上記と同様で、HTMLタグ の順序そのものを変えるものではありません。
- 1
- 2
- 3
- 4
<style>
.flex {
display: -ms-flexbox; /* IE */
display: flex;
}
.order-minus-1 {
-ms-flex-order: -1; /* IE */
order: -1;
}
.order-1 {
-ms-flex-order: 1; /* IE */
order: 1;
}
.order-2 {
-ms-flex-order: 2; /* IE */
order: 2;
}
</style>
<ul class="flex flex-horizontal-reverse">
<li class="order-1">1</li>
<li>2</li>
<li class="order-2">3</li>
<li class="order-minus-1">4</li>
</ul>
flex-basisについて
flex-basis
は Flexboxのアイテムの初期サイズを設定するための属性です。
横並びの場合は width
と同じ役割をし、縦並びの場合は height
と同じ役割をします。
ただし、width
(または height
)と一緒に flex-basis
が有効に設定されている場合は、flex-basis
の値が優先されます。
要素のサイズを柔軟に設定したい場合は、width
や height
ではなく flex-basis
を設定するとサイズを調整して表示してくれるため便利です。
また、Flexboxのアイテムはその要素に設定されている最小サイズ以下の大きさに収縮することはありません。この最小サイズを設定する場合は、min-width
や min-height
を設定してください。
課題
課題1のヒント