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

Question

当省略输入的下一个同级时，我在堆叠输入字段并根据屏幕大小（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”并隐藏它来做到这一点，但我想避免这种情况。

小提琴演示

标签： htmlcssflexboxdisplay

Answer 1

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