Question

我有一个输入元素，我想使用flex shrink来增长和缩小，但是它的弹性基础大小没有被应用。

这是我的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是一个没有css属性的简单div而且也没有设置为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; }

希望这有帮助。

当包含该元素的两个div时，不应用flex基础

1 个答案: