反応でフレックスを使用しているボックスを調整する際の問題

Question

ここに示されているものでは、赤と青の四角形のように3つのブロックを整列させようとしています。 http://jsfiddle.net/Manojkr/hqgx0ua8/。現在入手できるのは、http://imgur.com/a/MjPBiのようなものです。私は何が間違っているのか分かりません。これは反応していますが、私は何をしようとしているのかは重要ではありません。 それともそうですか？誰かが私が間違っていることを考えている人はいませんか？私は例を非常に厳密に守っているようです。

const FlexContainer = styled.div` 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
    -webkit-align-items: center; 
    align-items: center; 
    -webkit-justify-content: center; 
    justify-content: center; 
` 


const DnDWrap = styled.div` 
    display: flex; 
    box-sizing: border-box; 
    margin: 0 auto; 
    flex-wrap: wrap; 
` 

const EquipmentWrap = styled.div` 
    display: flex; 
    flex-wrap: wrap; 
    align-content: space-between; 
` 

const DnDContainer = styled.div` 
    background-color: RGB(140, 133, 110); 
    color: yellow; 
    margin: 10px; 
    text-align: center; 
    vertical-align: middle; 
` 

<FlexContainer> 
      <DnDWrap> 
      <DnDContainer onClick={(e)=>this.changeCharacter(e)} style={styles.character}> 
       Character 
      </DnDContainer> 
      <EquipmentWrap> 
       <DnDContainer onClick={(e)=>this.changeEquipment(e)} style={styles.equipment}> 
        equipment 
       </DnDContainer> 
       <DnDContainer onClick={(e)=>this.changeEquipment(e)} style={styles.equipmentClearLeft}> 
        equipment 
       </DnDContainer> 
      </EquipmentWrap> 
      </DnDWrap> 
</FlexContainer> 

Answer 1

は、ここでは、適応することができ、通常のHTML/CSSを使用した一般的な方法です。左右のメインフレックス列を作成し、青いボックスのフレックス列を作成します。

.flex { 
 
    display: flex; 
 
} 
 
.grow { 
 
    flex-grow: 1; 
 
} 
 
.col { 
 
    flex-direction: column; 
 
} 
 
.right { 
 
    flex-basis: 48%; 
 
} 
 
.red { 
 
    height: 100px; 
 
    background: red; 
 
    margin-right: 1em; 
 
} 
 
.blue { 
 
    background: blue; 
 
} 
 
.blue:first-child { 
 
    margin-bottom: 1em; 
 
}

<div class="flex"> 
 
    <div class="grow red"> 
 
    </div> 
 
    <div class="flex col right"> 
 
    <div class="grow blue"></div> 
 
    <div class="grow blue"></div> 
 
    </div> 
 
</div>