无论兄弟元素如何，如何垂直对齐输入字段以具有相同的宽度？答案

【问题标题】：How to vertically align input fields to have the same width regardless of the sibling element?无论兄弟元素如何，如何垂直对齐输入字段以具有相同的宽度？
【发布时间】：2021-01-18 08:05:53
【问题描述】：

当省略输入的下一个同级时，我在堆叠输入字段并根据屏幕大小 (flex) 保持相同宽度时遇到问题。

HTML

 <div class="wrapper">
  <div class="parent">
    <input class="item1" />
    <div class="item2">something</div>
  </div>
  <div class="parent">
    <input class="item1" />
  </div>
</div>

CSS

 .wrapper {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
 }

 .parent {
   display: flex;
   width: 100%;
   flex: 1;
 }

 .item1 {
   flex: 1;
   display: flex;
   border: 1px solid grey;

 }

 .item2 {
   flex: 0 0 100px;
   border: 1px solid red;
 }

没有“item2”元素的输入字段“item1”占据父项的整个宽度，但希望它与上面的“item1”完全对齐。我可以通过提供“item2”并隐藏它来做到这一点，但我想避免这种情况。

Fiddle demo

【问题讨论】：

当你需要对齐 col 和 rows 它的工作网格不是 flex ：jsfiddle.net/L7k9e2ph/1
是的，将与网格一起使用...想找到一个使用 flex 的解决方案，但只会引入 hacks..

标签： html css flexbox display

【解决方案1】：

制作两列并将 .item1 和 .item1 放在第一列中，并将 .item2 放在第二列中。然后，您可以在列中使用flex-direction: row，在第一列中使用flex-direction: column。

【讨论】：

我猜你指的是我也不能使用的列的网格......
不，我说的是 flexbox。