使用flex in react麻煩對齊框

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行，然后為藍色框創建一個flex列。

 .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>