我正在尝试让三个 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>
最佳答案
这是使用您可以修改的普通 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>
关于html - 在 react 中使用 flex 对齐框时出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44876162/