如何根據內容最長的項目將flex項目設置為相等的寬度？

Question

這是場景：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: flex;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 33.33333%;
}
</style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-container">
      <button class="flex-item">Foo</button>
      <button class="flex-item">Bar</button>
      <button class="flex-item">Long ass text here</button>
    </div>
  </div>
</body>
</html>

這些按鈕的大小相同，但問題是它們不會根據內容最長的彈性項目縮放大小。 相反，此處最后一個按鈕的文本溢出。 它是這樣的：

這就是我想要的樣子：

因此，簡而言之，我想要3個寬度和高度相同的flex按鈕，其中寬度應根據內容最長的按鈕確定 。 另外，我寧願只使用CSS（如果可能）執行此操作。

編輯：因為似乎存在一些誤解，所以我想澄清一下，寬度應該動態變化，因此可以使用為按鈕指定的任何文本，而不僅僅是上面顯示的文本。 換句話說，您不能僅為flex-item直接添加例如width: 10rem ，因為它僅在特定情況下有效。

Answer 1

flex在這里由於這種行為而失敗：

Display:grid可以在將來使用。

您的問題提及3個要素：

教程https://css-tricks.com/snippets/css/complete-guide-grid/

瀏覽器支持http://caniuse.com/#search=grid

一個Polyfill https://github.com/FremyCompany/css-grid-polyfill/

http://gridbyexample.com/browsers/

 .flex-container { display: flex; border: 1px solid black; margin: 1em; } .flex-container .flex-container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .flex-item { background-color: cornflowerblue; height: 1.7rem; padding: 0 1.2rem; width: 100%; white-space: nowrap; } @supports (display: grid) { .discl { display: none } }

 <p class="discl"> grid CSS seems not supported by your browser</p> <div class="flex-container"> <div class="flex-container"> <button class="flex-item">Foo</button> <button class="flex-item">Bar</button> <button class="flex-item">Long ass text here</button> </div> </div> <div class="flex-container"> <div class="flex-container"> <button class="flex-item">Foo</button> <button class="flex-item">Bar</button> <button class="flex-item">Long text & Long text here</button> </div> </div>

此外，從已知數量的元素來看， column CSS可能在這里有用

 .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid black; margin:1em; } .flex-container .flex-container { display:block; -moz-column-count:3; -moz-column-gap:0; -webkit-column-count:3; column-count:3; -webkit-column-gap:0; column-gap:0; } .flex-item { background-color: cornflowerblue; height: 1.7rem; padding: 0 1.2rem; width: 100%; white-space: nowrap; }

 <div class="flex-container"> <div class="flex-container"> <button class="flex-item">Foo</button> <button class="flex-item">Bar</button> <button class="flex-item">Long ass text here</button> </div> </div> <div class="flex-container"> <div class="flex-container"> <button class="flex-item">Foo</button> <button class="flex-item">Bar</button> <button class="flex-item">Long ass text here Long ass text here</button> </div> </div>

在這兩種情況下， display flex僅可用於將第二個容器縮小到其內容。在父級， float或display:inline-block中也可以這樣做。

Answer 2

請嘗試這個，讓我知道它是否有效。

.flex-container {
    display:flex;
    align-items: stretch;
    border: 1px solid black;
}

.flex-item {
    background-color: cornflowerblue;
    height: 1.7rem;
    width: 10rem;
    padding: 0 1.2rem;
    flex: 1 1 33.33333%;
    white-space: nowrap;
    max-width: 50%;
    flex-grow: 1;
    flex-basis: 0;
}

<div class="flex-container">
<div class="flex-container">
  <button class="flex-item">Foo</button>
  <button class="flex-item">Bar</button>
  <button class="flex-item">Long ass text here</button>
</div>
</div>

Answer 3

我把顯示器放在固體上。 只需給出一個固定寬度，它現在應該看起來像您想要的那樣。

 <!DOCTYPE html> <html> <head> <style> .flex-container { display: solid; border: 1px solid black; } .flex-item { background-color: cornflowerblue; height: 1.7rem; width: 10rem; padding: 0 1.2rem; flex: 1 1 33.33333%; white-space: nowrap; max-width: 50%; } </style> </head> <body> <div class="flex-container"> <div class="flex-container"> <button class="flex-item">Foo</button> <button class="flex-item">Bar</button> <button class="flex-item">Long ass text here</button> </div> </div> </body> </html>

如何根據內容最長的項目將flex項目設置為相等的寬度？

問題描述

3 個解決方案

解決方案1
3 已采納 2017-03-07 22:01:21

解決方案2
1 2017-03-07 19:42:12

解決方案3
0 2017-03-07 19:41:28

如何根據內容最長的項目將flex項目設置為相等的寬度？

問題描述

3 個解決方案

解決方案1 3 已采納 2017-03-07 22:01:21

解決方案2 1 2017-03-07 19:42:12

解決方案3 0 2017-03-07 19:41:28

解決方案1
3 已采納 2017-03-07 22:01:21

解決方案2
1 2017-03-07 19:42:12

解決方案3
0 2017-03-07 19:41:28