代码之家 › 专栏 › 技术社区 › CompanyDroneFromSector7G

中央自动调整列大小

alignment flexbox css3 css html

1

CompanyDroneFromSector7G · 技术社区 · 6 年前

如何实现3列布局,其中中心列自动展开内容,但保持中心位置,左右列根据需要缩小?

我被告知这可以用flexbox完成,但我找不到一个这样做的例子,我需要什么。

2 回复 | 直到 6 年前

1

2

kukkuz 6 年前

给予 flex: 1 到左边和弹性项目和 flex: 0 0 auto 0 1 auto 你不想 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>