我有一个带有两列的flexbox容器，每列都有动态内容，这意味着动态高度。我需要降低右栏，为此我设置了一个上边距。这不会产生预期的结果，因为底部没有被推动，它仍然与左列的底部对齐（遵循规范，这规定了弹性项目默认情况下应该具有相同的高度）。 Fiddle供参考。
.container {
display: flex;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.container .component {
width: 50%;
box-sizing: border-box;
/*height: 250px;*/
border: 1px solid black;
padding: 0px 10px;
}
.container .right {
margin-top: 20px;
}<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
tempus a ex non, dictum posuere enim.
</p>
</div>
</div>
我需要的东西可以通过固定的高度来实现，但这不够灵活，无法承受奢侈品。在上面的代码段中，取消注释.container .component：
.container {
display: flex;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.container .component {
width: 50%;
box-sizing: border-box;
height: 250px;
border: 1px solid black;
padding: 0px 10px;
}
.container .right {
margin-top: 20px;
}<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
tempus a ex non, dictum posuere enim.
</p>
</div>
</div>
您可以在上面的示例中看到，由于设置20px，右列的顶部和底部都有margin-top偏移量。有没有一种方法可以在没有明确设置列高度的情况下实现此结果？
答案 0 :(得分：2)
一种选择是在margin-bottom: 20px
.left
.container {
display: flex;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.container .component {
width: 50%;
box-sizing: border-box;
border: 1px solid black;
padding: 0px 10px;
}
.container .right {
margin-top: 20px;
}
.container .left {
margin-bottom: 20px;
}<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
tempus a ex non, dictum posuere enim.
</p>
</div>
</div>
答案 1 :(得分：0)
您可以使用position: relative;和top: 20px;。
.container {
display: flex;
border: 1px solid red;
padding: 10px;
/* overflow: hidden; */
}
.container .component {
position: relative;
width: 50%;
box-sizing: border-box;
/*height: 250px;*/
border: 1px solid black;
padding: 0px 10px;
}
.container .right {
top:20px;
}<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros, tempus a ex non, dictum posuere enim.
</p>
</div>
</div>
答案 2 :(得分：0)
或者，您可以使用align-self Flexbox属性来实质上设置组件元素的垂直对齐。这就是你要追求的吗？在Flexbox面前有点苍蝇！
.container {
display: flex;
border: 1px solid red;
padding: 10px;
overflow: hidden;
}
.container .component {
width: 50%;
box-sizing: border-box;
/*height: 250px;*/
border: 1px solid black;
padding: 0px 10px;
}
.container .right {
margin-top: 20px;
align-self: flex-end;
}
.container .left {
align-self: flex-start;
}<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
tempus a ex non, dictum posuere enim.
</p>
</div>
</div>
答案 3 :(得分：0)
Do u need like this?
<!--css -->
<style>
.container {
display: flex;
border: 1px solid red;
padding: 20px;
overflow: hidden;
}
.container .component {
width: 50%;
box-sizing: border-box;
border: 1px solid black;
padding: 0px 10px;
position: relative;
}
.container .right {
margin-top: 20px;
}
.container .left {
margin-bottom: 20px;
}
</style>
<!--html-->
<div class="container">
<div class="component left">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
<div class="component right">
<p>
Morbi sit amet pharetra turpis, id placerat sem. Fusce tempus nisl vel arcu euismod, nec convallis risus ullamcorper. Duis fringilla molestie lacus nec rhoncus. Nunc ex massa, placerat id risus sed, luctus varius elit. Nam vestibulum orci a massa sollicitudin
porttitor. Donec sagittis odio metus, eu aliquam tellus blandit eget. Aenean viverra dapibus risus at euismod. Ut hendrerit scelerisque libero, at accumsan ligula vestibulum in. Vivamus tristique erat faucibus ante dapibus vestibulum. Maecenas id
auctor elit. Nullam at interdum arcu, in gravida nisl. Nunc lacinia, quam a hendrerit auctor, sapien est pulvinar mauris, non laoreet justo elit id risus. Nullam vel nulla ligula. Vestibulum at tincidunt orci, non rhoncus sapien. Vivamus nunc eros,
tempus a ex non, dictum posuere enim.
</p>
</div>
</div>