我需要并排对齐两个<textarea>个元素，以便每个文本区域应该占据窗口的整个高度和宽度的一半.
以下方法很好用，但是...
body {
display: flex;
}
textarea {
width: 50%;
}<textarea></textarea>
<textarea readonly></textarea>但我不明白为什么50%如果我用display: flex就可以了，但没有就太多了.
这就引出了另一个问题:这真的是完成这项任务的"适当"方式吗？这看起来像是一个"速战速决"的解决方案.有没有一种更"恰当"的方式来调整它们？
默认的flex值为0 1 auto，相当于:
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
因此，当您将您的文本作为flex父对象，但不对其应用任何特定的flex条规则时，它们将自动应用flex-shrink: 1;条规则.当你给他们width: 50%;的时候，他们都会试着扩大到父母宽度的50%，但also会明白他们应该根据需要缩小以适应.
因为没有理由让一个文本区比另一个文本区宽，所以它们最终是等宽的.但是，如果您给它们一个更大的宽度(如100%;)，您实际上可能会得到相同的行为，如本例所示:
body {
display: flex;
}
textarea {
width: 100%;
}<textarea></textarea>
<textarea readonly></textarea>我个人最喜欢的一种方法是，将许多项目放在弹性容器中，无论它们的内容如何，都占据相同的宽度，这就是使用以下规则的组合:
.flex {
display: flex;
}
.flex-child {
outline: 2px solid red;
width: 0;
flex: 1 1 auto;
}<div class="flex">
<div class="flex-child">One</div>
<div class="flex-child">Two</div>
<div class="flex-child">Three</div>
<div class="flex-child">Four</div>
</div>将元素的宽度设置为0基本上会告诉FlexBox在考虑元素相对于其sibling 元素的宽度时不考虑其内容，这有助于确保相等的列宽.然后，flex: 1 1 auto;告诉每个项目根据需要展开和折叠，它们将try 沿FLEX轴填充相同数量的空间.
当涉及到理解Flexbox如何在如下情况下工作时，您可能会发现这篇关于CSS技巧的文章很有帮助:Equal Columns With Flexbox: It’s More Complicated Than You Might Think
对于可以获得类似结果的替代方法，您可能有兴趣阅读更多关于如何使用the fr ("fraction") unit在使用CSS网格构建布局时使用the fr ("fraction") unit的信息，该网格可用于定义具有相等宽度的列以及它们之间的间隙.Css Tricks有a useful cheat sheet for working with grid个.
下面是一个使用此方法的示例:
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1rem;
}
.grid textarea {
/* Disallow horizontal resizing */
resize: vertical;
/* This isn't ideal for how it affects vertical resizing,
but it does ensure both textareas stay the same height */
min-height: 100%;
}<div class="grid">
<textarea></textarea>
<textarea readonly></textarea>
</div>