html - 在 react 中使用 flex 对齐框时出现问题

Question

我正在尝试让三个 block 对齐，就像这里显示的红色和蓝色方 block 一样； http://jsfiddle.net/Manojkr/hqgx0ua8/ .目前我所能得到的是这样的东西:http://imgur.com/a/MjPBi .我不知道我做错了什么。这是 react ，但这对我正在尝试的事情无关紧要去做。或者也许是这样？有谁知道我做错了什么，看来我非常密切地关注这个例子。

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>