html - 使祖先 flexbox div 仅占用其具有设置宽度的 child 的宽度

Question

我有一个使用 flex 显示的输入元素，我设置它的 flex-basis 宽度如下:

.flex-row input { flex: 0 1 450px; }

flex-row div 包含在 flex-container div 中。

我希望 flex-row 只占据输入所占用的宽度。

当我给 flex-container display: flex 时，它占据了 100% 的宽度。

当我给它 display: inline-flex 时，它会压缩输入，使其比 450px 小得多。

我真的不在乎flex-container的宽度，虽然它也能占据它的 child 的宽度会很好，但我如何制作 flex-row 具有与输入相同的宽度(即，当有足够的空间时，为 450px)？

.flex-container {
  display: flex;
}
.flex-row {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}
.flex-row input {
  flex: 0 1 450px;
}

<div class="flex-container">
  <div class="flex-row">
    <input type="text" name="query" class="searchbar" />
  </div>
</div>

和here是一个 fiddle 的例子。

Answer 1

将与 flex-row 输入相同的 flex 属性添加到 flex-row。

.flex-row{
    display: flex;
    flex: 0 1 450px;
    align-items: center;
    justify-content: center;
}

如果您希望该行也居中，请按如下方式将对齐和对齐属性添加到 flex 容器。

.flex-container{
   display: flex;
   align-items: center;
   justify-content: center;
}