如何給flex項寬度相等？

Question

我希望第一個和最后一個元素具有相同的寬度。 怎么做？

 main { display: flex; justify-content: space-between; width: 100%; } input { width: 200px; } 

 <main> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> <input type="text"> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, </div> </main> 

JSFiddle： https ：//jsfiddle.net/7nz07sqn/9/

Answer 1

給flex: 0 0 auto到中間 div（這樣它占用的寬度和它的內容一樣多）和flex: 1用於其他兩個div（添加border用於說明）

請注意，此解決方案假設 中間div具有固定寬度（您已為input提供固定width ） - 請參閱下面的演示：

 main { display: flex; justify-content: space-between; width: 100%; } input { width: 200px; } main > div { border: 1px solid; } main div:first-child, main div:last-child { flex: 1; } main div:nth-child(2) { flex: 0 0 auto; } 

 <main> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> <input type="text"> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, </div> </main> 

Answer 2

要使第一個和最后一個元素的寬度相等，只需給它們flex: 1 。

 main { display: flex; } input { width: 200px; } main > div:first-child, main > div:last-child { flex: 1; } 

 <main> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div> <input type="text"> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit, </div> </main> 

這告訴第一個和最后一個項消耗容器中可用空間的相等分布。

因為中間div（帶有輸入）占據200px的寬度，所以flex: 1的兄弟共享剩余空間（100％ - 200px）。

flex: 1規則是flex: 1 1 0的簡寫flex: 1 1 0 ，分為：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

第一個和最后一個div的寬度不等於開頭，因為flex-basis的初始設置是auto 。 這意味着項目的大小取決於其內容的長度。