當包含元素的兩個div

Question

時，不應用flex基礎我有一個輸入元素，我想要使用flex shrink進行增長和縮小，但未應用其flex基礎大小。

這裏是我的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容器，因此它的寬度是auto，並且圍繞輸入進行包裝而不是應用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; } 

希望這會有所幫助。