CSS Flex Responsive
レスポンシブフレックスボックス
CSSメディアクエリの 章から、メディアクエリを使用して、さまざまな画面サイズとデバイス用にさまざまなレイアウトを作成できることを学びました。
ラップトップとデスクトップ：
1
2
3
携帯とタブレット：
1
2
3
たとえば、ほとんどの画面サイズで2列のレイアウトを作成し、小さな画面サイズ（携帯電話やタブレットなど）で1列のレイアウトを作成する場合は、flex-direction特定
のブレークポイント（800pxの以下の例）：rowcolumn
例
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
別の方法は、フレックスアイテムのプロパティのパーセンテージを変更して、flex画面サイズごとに異なるレイアウトを作成することです。flex-wrap: wrap;この例を機能させるには、フレックスコンテナにも含める必要があることに注意してください。
例
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Flexboxを使用したレスポンシブ画像ギャラリー
flexboxを使用して、画面サイズに応じて4つ、2つ、または全幅の画像間で変化するレスポンシブ画像ギャラリーを作成します。
Flexboxを使用したレスポンシブウェブサイト
flexboxを使用して、柔軟なナビゲーションバーと柔軟なコンテンツを含むレスポンシブWebサイトを作成します。