如何使柔性项目缩小到最小的拟合尺寸，但尺寸相同？

Question

我正在尝试制作一排按钮，其中按钮的大小相同，但尽可能小 - 因此每个按钮的大小与最大的按钮相同。

我怎样才能做到这一点？

 div { border: solid 1px black; margin: 5px; padding: 5px; background-color: #fff; } .container { display: flex; flex-flow: row nowrap; justify-content: flex-end; } .item { background-color: #eef; flex: 0 1 auto; white-space: nowrap; } 

 <div class="container"> <div class="item">this one is quite long</div> <div class="item">short</div> </div> 

Answer 1

flexbox可以做很多但不是全部。 对于这个grid会很好，但由于它缺乏良好的浏览器支持，它的旧“版本” table可能是一个选项。

这是一个免费的脚本动态解决方案，使用display: inline-table 。

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-table; border-spacing: 10px 5px; } .item { background-color: #eef; display: table-cell; width: 50%; white-space: nowrap; text-align: left; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

Answer 2

我不认为这是可能的flexbox，但对于它的价值，这可以通过CSS网格布局模块实现 。

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-grid; grid-template-columns: 1fr 1fr; } .item { background-color: #eef; text-align: left; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

Codepen演示

这是相关的CSS：

.container {
  text-align: right; 
}
.wrap {
  display: inline-grid; 
  grid-template-columns: 1fr 1fr;
}

值得注意的是， flex-grow: 1 （对于flex项目）的工作方式与灵活长度相比有点不同 - 1fr用于css网格。

 .container, .item { border: solid 1px black; margin: 5px; padding: 5px 0 5px 5px; background-color: #fff; } .container { text-align: right; } .wrap { display: inline-flex; } .item { background-color: #eef; text-align: left; flex: 1; } 

 <div class="container"> <div class="wrap"> <div class="item">this one is quite long</div> <div class="item">shorter</div> </div> </div> 

这几乎完全相同的代码 - 除了flex-grow似乎将第一个项目的长文本包装到一个新行。