当两个 div 包含该元素时不应用弹性基础

Question

我有一个输入元素，我想使用 flex shrink 来扩大和缩小它，但它的 flex-basis 大小没有被应用。

这是我的html：

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

还有我的 CSS：

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

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

为什么没有应用基本尺寸？它被设置为比 450px 小得多的宽度。

Here 是一个例子。

Answer 1

实际上这里发生的情况是您的输入的直接父级.flex-row 是一个简单的 div，没有 css 属性，也没有设置为 flex 容器，因此它的宽度是自动的并且环绕输入而不应用 flex 属性.要将 flex 属性应用于输入，请使用以下 css 使输入的父显示为 flex。

.flex-container{
   display: flex;
 }

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

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

希望这会有所帮助。