中央自动调整大小列

Question

如何实现3列布局，其中中心列会自动扩展内容，但仍保持中心位置，左右列会根据需要缩小？

有人告诉我可以用flexbox做到这一点，但是我找不到一个可以满足我需要的例子。

Answer 1

将flex: 1赋予 left 和 right 弹性项目和flex: 0 0 auto（因为默认值为0 1 auto，而您没有想要 middle flex项的flex-shrink值设为1）-请参见下面的演示

.wrapper {
  display: flex;
}

.wrapper>* {
  border: 1px solid;
  flex: 1;
}

.middle {
  flex: 0 0 auto;
}

<div class="wrapper">
  <div>left</div>
  <div class="middle">Lorel ipsum</div>
  <div>right</div>
</div>