Flexboxでできること
Flexboxを使うと下記のようなレイアウトを簡単に組むことができます。
display: flexとは
display: flexは指定した要素の子要素を横並びにします。
display: flexの使い方
横並びにしたい要素の親要素にdisplay: flexを指定します。
/* .flex-listに、displayプロパティを指定してください */
.flex-list {
display: flex;
}
flex: autoとは
flex: autoは指定した要素の幅を親要素に合わせて伸縮させることができます。
flex: auto の使い方
親要素の幅に合わせて伸ばしたい要素にflex: autoを指定します。
flex-wrap: wrap とは
flex-wrap: wrapを指定すると、子要素のサイズに応じて折り返すことができます。
flex-wrap: wrap の使い方
折り返したい要素の親要素にflex-wrap: wrapを指定します。折り返したい要素自身には列数に応じたwidthを指定します。
今回は2列にしたいのでwidth: 50%を指定しましょう。
.flex-list {
display: flex;
/* flex-wrapを指定してください */
flex-wrap: wrap;
}
.flex-list li {
flex: auto;
/* widthを50％に指定してください */
width: 50%;
}
画面幅を狭めた時に2列に折り返すようにしよう
メディアクエリと合わせて
使おう
レスポンシブデザインにするために、HTML＆CSSの上級編で学習したメディアクエリを使ってみましょう。画面幅が狭くなったときに折り返しを有効にすることができます。
stylesheet.css
/* タブレット向けレイアウト */
/* ブレイクポイントが1000px以下の時のメディアクエリを設定してください */
@media (max-width: 1000px) {
/* .flex-listにflex-wrapを指定してください */
.flex-list {
flex-wrap: wrap;
}
/* .flex-list li にwidthを50%に指定してください */
.flex-list li {
width: 50%;
}
}
flex-direction
flex-direction: columnとは
flex-direction: columnは子要素を上から下へ並べます。
flex-direction: column
の使い方
縦に並べたい要素の親要素にflex-direction: columnを指定します。
ブロック要素の中央寄せの復習
ブロック要素の中央寄せを復習しましょう。margin: 0 autoとwidthを指定することで中央寄せにします。widthは画面幅1000px以下の時に指定したものがそのまま適用されているので、ここではmarginのみを指定します。
メディアクエリと合わせて
使おう
メディアクエリを合わせて設定すると、画面がさらに狭くなったときに縦方向に並べることができます。
/* スマホ向けレイアウト */
/* ブレイクポイントが670px以下の時のメディアクエリを設定してください */
@media (max-width: 670px) {
/* .flex-listにflex-directionを指定してください */
.flex-list {
flex-direction: column;
}
/* .flex-list liにmarginを0 autoに指定してください */
.flex-list li {
margin: 0 auto;
}
}