如何给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 。 这意味着项目的大小取决于其内容的长度。