CSSフレックスレスポンシブ
レスポンシブフレックスボックス
CSSメディアクエリの章で、メディアクエリを使用して、さまざまな画面サイズやデバイスに応じたさまざまなレイアウトを作成できることを学びました。
ラップトップとデスクトップ:
1
2
3
携帯電話とタブレット:
1
2
3
例
.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を使用したレスポンシブWebサイト
flexboxを使用して、柔軟なナビゲーションバーと柔軟なコンテンツを含むレスポンシブWebサイトを作成します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。