ポジショニングフレックス項目が

Question

私は、次のレイアウトは、フレキシボックスを使用しています

私は右側に2を含むdiv要素を持つようにしたい、とTeamScorersは、その左側のスペースを構成する必要があります。

必要なレイアウト：

テーブルを使用した場合は、2のROWSPANを持つ2のdivと同じ考えです。

TeamとScorersを2の左側に配置する方法はありますか？もしそうなら、それは問題の価値があるのでしょうか？ここで

は、これまでのところ、私のCSSです：

.container { 
    max-width: 600px; 
} 

.team { 
    background-color: chartreuse; 
} 

.score { 
    background-color: brown; 
} 

.scorers { 
    background-color: steelblue; 
} 

.cards-desktop { 
    background-color: goldenrod; 
} 

.carded-players { 
    background-color: darkorange; 
} 

.left-col { 
    display: flex; 
    flex-flow: row wrap; 
} 
.left-col > * { 
    flex: 1 100%; 
} 

.team { 
    order: 1; 
} 

.score { 
    order: 3; 
} 

.scorers { 
    order: 2; 
} 

.cards-desktop { 
    order: 4; 
} 

.carded-players { 
    order: 5; 
} 

.team { 
    flex: 1 auto; 
} 

.score { 
    flex: 0 150px; 
    font-size: 60px; 
} 

レイアウトは、他のブレークポイントに異なるものになりますので、私は他のブレークポイントに複製または模倣されない1つのHTMLブロックを持っていると思います。だからこそ、この2つのdivをコンテナにラップしたくないのは、他のブレークポイントのレイアウトでは不要なためです。ここで

Codepen Link

Answer 1

..

ラップ1、2 /flex-direction:column/flex-wrap:wrapと、自分のDIVインチ

次に、さまざまなコンポーネントの幅を設定します。

残念ながら、私はクロムにラップを強制的に固定する必要があると思う（これはバグだと思う）...そこにはあなたがいる。一目で

* { 
 
    box-sizing: border-box; 
 
} 
 
.team { 
 
    background: chartreuse; 
 
} 
 
.score { 
 
    background: brown; 
 
} 
 
.scorers { 
 
    background: steelblue; 
 
} 
 
.cards-desktop { 
 
    background: goldenrod; 
 
} 
 
.carded-players { 
 
    background: darkorange; 
 
} 
 
.wrap { 
 
    width: 80%; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.top > div { 
 
    padding: 5px; 
 
} 
 
.bottom > div { 
 
    height: 25px; 
 
} 
 
.top { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 150px; 
 
} 
 
.team, 
 
.scorers { 
 
    height: 50%; 
 
    width: 75%; 
 
} 
 
.score { 
 
    width: 25%; 
 
    flex: 1 0 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 28px; 
 
}

<div class="wrap"> 
 
    <div class="top"> 
 
    <div class="team">Team</div> 
 
    <div class="scorers">Scorers</div> 
 
    <div class="score"> 
 
     <h1>2</h1> 
 
    </div> 
 
    </div> 
 
    <div class="bottom"> 
 
    <div class="cards-desktop">cards-desktop</div> 
 
    <div class="carded-players">carded-players</div> 
 
    </div> 
 
</div>