如何給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 s的說明）

請注意，此解決方案假設的中間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-grow: 1
• flex-shrink: 1
• flex-basis: 0

的第一個和最後的div不等於寬度開始因爲flex-basis的初始設置是auto。這意味着項目的大小根據其內容的長度而定。