在反应中使用 flex 对齐盒子时遇到问题答案

【问题标题】：Trouble aligning boxes using flex in react在反应中使用 flex 对齐盒子时遇到问题
【发布时间】：2017-12-06 04:00:34
【问题描述】：

我试图让三个块对齐，就像这里显示的红色和蓝色方块一样； 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>

【问题讨论】：

标签： html css reactjs flexbox jsx

【解决方案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>

【讨论】：