製作祖先Flexbox的申報單隻佔用其子的寬度與一組寬度

我使用柔性顯示器有一個輸入元素和我設置其flex-basis寬度像這樣：製作祖先Flexbox的申報單隻佔用其子的寬度與一組寬度

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

和flex-row DIV包含內flex-container股利。

我希望flex-row只佔用輸入所需的寬度。

當我給flex-containerdisplay: 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是一個小提琴例子。

來源

2016-11-08 user3494047

您是否考慮過將'flex-row'設置爲450px，然後讓子輸入只需用'flex：1'填充？ https://jsfiddle.net/5wksaj72/2/ –

我做了，但我的HTML比這複雜一點。我有多個對象，而不僅僅是一個輸入元素，在多個彈性行內。 – user3494047

@Michael_B也許我應該更新我的問題，但[這裏]（https://jsfiddle.net/5wksaj72/3/）是一個更準確的圖片，我的情況看起來像，雖然我猜[this]（https：// jsfiddle.net/5wksaj72/4/）的作品 – user3494047

將相同的flex屬性添加到flex-row中，就像在flex-row輸入中一樣。

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

如果你想要的行爲中心以及再加入對齊和證明性的柔性容器如下。

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

來源

2016-11-08 13:40:33

所以你的建議是也將彈性基礎放在彈性行而不是輸入？ – user3494047

是的。這是您可以控制行和輸入的唯一方法，以保持自己的靈活性和寬度，即使在那裏有很多空間時也是如此。我相信這個答案符合你的要求。如果沒有，那麼我可能會錯過理解。請讓我知道，我可以幫助。 –

製作祖先Flexbox的申報單隻佔用其子的寬度與一組寬度

回答

相關問題