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的宽度，虽然它也很好地占据了它的孩子的宽度，但是如何使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是一个小提琴的例子。

Answer 1

在flex-row输入中添加与flex-row相同的flex属性。

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

如果您希望行也居中，那么将align和justify属性添加到flex容器中，如下所示。

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

使祖先flexbox div仅占用其设置宽度的子宽度

1 个答案: