2

シナリオ：div#wrapper次のcssを持つ要素があります。

div#wrapper {
    display: box;
    box-orient: horizontal;
    width: 100%;
}

このラッパーには<section>、わかりやすくするためにセクションA、B、Cと呼ぶ3つの子要素が含まれています。そのため、次のようなものが残ります。 セクションの標準レイアウト

美しい。ここに問題があります：私は現在メディアクエリに取り組んでおり、800px未満のときにこのレイアウトを変更する必要があります。具体的には、セクションBをセクションAとCの下に移動して、全幅にする必要があります。説明に役立つグラフィックを次に示します。 ここに画像の説明を入力してください

質問：1つの子要素をその柔軟なボックスから切り離して、この方法でレイアウトを変更することは可能ですか？

4

1 に答える 1

0

フレックスボックスの仕様は常に変化しています。現在の推奨事項では、行を折り返すフレックスコンテナを使用し、セクションの幅を2つだけがラッパーに収まるように設定し、順序を使用してセクションbを最後に配置します。

http://jsfiddle.net/LYnRf/（Windows上のChrome 22でテスト済み）

于 2012-09-28T15:46:13.910 に答える