我有两个div并排显示，flex是相同的高度。我希望内部的文字显示为对齐，并且如果父母的内容调整大小则保持不变。但我无法想象这一点。任何想法？
为了澄清我令人困惑的问题，我希望两个文本始终显示在同一高度，所以如果一个文字增长，因为后面的文字较大，另一个文字应移动到匹配位置。
.row {display: flex;}
.col {flex: 1;
padding: 1em;
border: solid;}
p{margin-top:20px;}<div class="row">
<div class="col">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>This stay there</h5>
<p>To be moved</p>
</div>
<div class="col">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.<br>This stay there</h5>
<p>At the same position of this one</p>
</div>
</div>
答案 0 :(得分：0)
如何使用表格布局来实现这一目标？
在表格布局中，您可以使用vertical-align将内容显示在其包含单元格的中间位置：
.row {
display: table;
width: 100%;
border: 2px solid #000;
}
.col {
display: table-cell;
vertical-align: middle;
width: 50%;
padding: 1em;
border: 2px solid #000;
}
p{
margin-top:20px;
}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p>To be moved</p>
</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
<p>At the same position of this one</p>
</div>
</div>
答案 1 :(得分：0)
你可以叠加flexbox
修改 您可以通过justify-content设置列flexbox内容的对齐方式，因为不太清楚您的期望，您可以在下面的代码段中测试3个对象
* body * {
margin: 0;
}
.row {
display: flex;
}
.col {
flex: 1;
padding: 1em;
border: solid;
display: flex;
flex-direction: column;
justify-content: space-around;
}
h5 {
margin: 0;
box-shadow: 0 0 0 1px;
}
p {
margin-top: 20px;
background: lightgray
}
b {
text-shadow: 0 0 5px white;
}
#spbet:checked ~ .row .col {
justify-content: space-between;
}
#ctr:checked ~ .row .col {
justify-content: center;
}
#btm:checked ~ .row .col {
justify-content: flex-end;
}
#flex1:checked ~ .row .col {
justify-content: initial;
}
#flex1:checked ~ .row .col h5 {
flex: 1;
}
aside {
display: flex;
justify-content: space-around;
}
label {
border: solid;
margin: 1em;
padding: 0.5em;
display: flex;
flex-flow: column;
align-items: center;
background: tomato;
}
input {
position: absolute;
left: -9999px;
}<input type="radio" id="def" name="test">
<input type="radio" id="spbet" name="test">
<input type="radio" id="ctr" name="test">
<input type="radio" id="btm" name="test">
<input type="radio" id="flex1" name="test">
<aside>
<label for="def"><b>space-around</b>
</label>
<label for="spbet"><b>space-between</b>
<br/>align texts from top to bottom</label>
<label for="ctr"><b>center
</b>align at center</label>
<label for="btm"><b>flex-end
</b>align at bottom</label>
<label for="flex1"><b>flex 1
</b>on h5, no justify-content</label>
</aside>
<div class="row">
<div class="col">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>This stay there</h5>
<p>To be moved</p>
</div>
<div class="col">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.<br>This stay there</h5>
<p>At the same position of this one</p>
</div>
</div>
display:table避免弯曲的方法可能是：
.row {
display: table;
width: 100%;
table-layout: fixed;
}
.col {
border: solid;
width: 50%;
box-sizing: border-box;
display: table-cell;
padding: 1em;
vertical-align: bottom;
}
p {}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p>To be moved</p>
</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
<p>At the same position of this one</p>
</div>
</div>
答案 2 :(得分：0)
这是我在使用flexbox忘记一些内容时引用的一个小指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
您可以使用flexbox来实现您要执行的操作，以便框中的内容始终垂直居中。
我制作了jsfiddle并复制了下面更新的CSS：
.row {display: flex;}
.col {flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
padding: 1em;
border: solid;}
p{margin-top:20px;}