私は次のことを達成しようとしています：フレキシボックス：フレックス方向で互いの上に2つの要素：行
私の最初の試みは、ヘルパーのdiv（緑）を使用することでした：
ここでは、携帯電話の画面上で、JavaScriptを使って、ププルとオレンジの要素をヘルパーから外しています。 しかし、単純なCSSの方法があります。
私の第二の試みは、ヘルパーを削除し、モバイルレイアウトを構築することでした：
は、上部の2つの要素を配置する方法はありますお互いがflex-direction: rowで？ （second attempt）
Flexboxでこれを行うことができますが、フレックスコンテナに固定heightを使用する必要があります。ここではFiddle
flex-direction: columnを基本的に使用し、最初のアイテムの高さを100％とし、widthを％で設定します。次に、メディアのクエリと高さで順序を変更します。
* {
box-sizing: border-box;
}
main,
div {
display: flex;
padding: 1rem;
}
.desktop {
flex-direction: column;
flex-wrap: wrap;
height: 400px;
width: 100%;
}
div {
flex: 1;
width: 30%;
}
[orange] {
background-color: #FFAD77;
flex: 0 0 70%;
}
[yellow] {
background-color: #FFE377;
flex: 0 0 100%;
width: 70%;
}
[purple] {
background-color: #FF77C8;
}
@media(max-width: 480px) {
.desktop div {
flex: 1;
width: 100%;
}
div[orange] {
order: -1;
flex: 2;
}
div[yellow] {
flex: 5;
}
div[purple] {
flex: 1;
}
}<div class="desktop">
<div yellow>lorem</div>
<div orange>lorem</div>
<div purple>lorem</div>
</div>これは質問に答えることはできません.. * "フレックス方向にお互いの上に2つの要素を配置する方法はありますか：* *行** "* –
はい、親と親のwidhtより大きい幅の合計がフレックスラップを持っている場合：wrap –
これはあなたが行を取得できる限りです。https://jsfiddle.net/89z21rq3/10/ –
ありませんが、代替的には致命的ではありません。絶対配置を使用すると、異なる画面サイズでレイアウトをより詳細に制御できます。
function toggleLayout() {
document.querySelector('main').classList.toggle('mobile');
}main {
position: relative;
width: 600px;
height: 400px;
}
main div {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
main.mobile div {
position: static;
width: 100%;
height: 33.3%;
}
[orange] {
background-color: #FFAD77;
bottom: 40%;
left: 66.6%;
}
[yellow] {
background-color: #FFE377;
right: 33.3%;
}
[purple] {
background-color: #FF77C8;
top: 60%;
left: 66.6%;
}<main>
<div orange></div>
<div yellow></div>
<div purple></div>
</main>
<button onclick="toggleLayout()">toggleLayout</button>問題は、ヘルパーラッパーを使用する場合は、あなただけのその中のアイテムを並べ替えることができますが、彼らの叔父でそれらを混在させないということです。
ヘルパーラッパーを使用しない場合は、列レイアウトが必要です。また、Nenad Vracar氏が提案したように、カラムを分割する唯一の広くサポートされている方法は、コントラナーの高さをハードコーディングすることです。しかし、時にはそれをすることはできません。
私は2つの優れた選択肢を提案しますが、彼らは貧しいサポート（基本的には、Firefoxを）持っている：
は、デスクトップ用のヘルパーラッパーを使用してモバイル
document.querySelector('button').addEventListener('click', function() {
document.querySelector('main').classList.toggle('mobile');
});main {
display: flex;
width: 600px;
height: 400px;
}
.wrapper {
display: flex;
flex-direction: column;
}
div {
flex: 1;
}
[data-color=orange] {
background-color: #FFAD77;
}
[data-color=yellow] {
background-color: #FFE377;
}
[data-color=purple] {
background-color: #FF77C8;
order: 3;
}
main.mobile {
flex-direction: column;
}
main.mobile .wrapper {
display: contents;
}
main.mobile [data-color=orange] {
order: -1;
}<main>
<div data-color="yellow"></div>
<div class="wrapper">
<div data-color="orange"></div>
<div data-color="purple"></div>
</div>
</main>
<button>toggleLayout</button>display: contentsとそれを取り除きます 使用強制ラインは
を破りますdocument.querySelector('button').addEventListener('click', function() {
document.querySelector('main').classList.toggle('mobile');
});main {
display: flex;
flex-flow: column wrap;
width: 600px;
height: 400px;
}
div {
flex: 1;
}
[data-color=orange] {
background-color: #FFAD77;
page-break-after: always;
break-after: always;
}
[data-color=yellow] {
background-color: #FFE377;
}
[data-color=purple] {
background-color: #FF77C8;
order: 3;
}
main.mobile {
flex-wrap: nowrap;
}
main.mobile [data-color=orange] {
order: -1;
}<main>
<div data-color="yellow"></div>
<div data-color="orange"></div>
<div data-color="purple"></div>
</main>
<button>toggleLayout</button>それはきちんとしていますが、あなたが何かを言ったように、おそらく将来のための可能な解決策です:)ありがとう – Marc
我々は列のレイアウトを持っている理由はありません、本当に、それはだではありません。 CSSは 'display：contents'を使ってヘルパーとこの*を行うことができますが、FFでのみサポートされています。 –
フレックスボックスを使用する理由はありますか？それは伝統的なポジショニングで行うことができます。 – 4castle
私は、レスポンシブなCSSと伝統的なポジショニングは、あなたがしなければならないことに対してうまくいくと思います。 – Taylor