錯誤對齊框使用反應中的柔性

Question

我試圖讓三個塊對齊像在這裏顯示的紅色和藍色方塊; 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>