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的一般方法。创建一个左/右侧的主要弹性行，然后是蓝色框的弹性列。

＆＃13;

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

＆＃13;

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

＆＃13;

使用flex进行反应时无法对齐盒子

1 个答案: