Flexbox：如何组合可变宽度和固定宽度

Question

我正在尝试使用三列来实现网格：

• 第一列的宽度为50％
• 第二和第三列组合也是50％宽度
• 第三列宽度是可变的;它应该增长但它似乎合适（它包含一个带有可变文本的按钮）。

如果第三列的最大宽度为x％，则第二列的宽度应为50-x％。

Answer 1

提供第一项function getSidebarEvents() { $('.b2').click(); } $('.b1').click(function() { //Do something to open sidebar getSidebarEvents(); }); $('.b2').click(function(){ console.log('Triggering Multiple times'); }); $('.b3').click(function() { //Do something to close sidebar }); 和中间flex-basis: 50%。

这将使前50％宽，最后宽度为内容，中间填充剩余空间

flex-grow: 1

.wrapper {
  display: flex;
}

.wrapper .item {
  border: 1px dotted gray;
}

.wrapper .item:first-child {
  flex-basis: 50%;
}

.wrapper .item:nth-child(2) {
  flex-grow: 1;
}