3 列 Flex 布局 - 中间列仅与内容一样宽答案

【问题标题】：3 Column Flex Layout - Middle Column only as width as it's content3 列 Flex 布局 - 中间列仅与内容一样宽
【发布时间】：2016-08-21 18:08:28
【问题描述】：

到目前为止我的小提琴：

.fill-height-or-more {
  min-height: 100%;
  display: flex;
}
.fill-height-or-more > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items : center;
}

.some-area > div {
  padding: 1rem;
}
.some-area > div:nth-child(1) {
  background: #88cc66;
}
.some-area > div:nth-child(2) {
  background: #79b5d2;
}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > div h1, .some-area > div h2 {
  margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}

html, body {
  height: 100%;
}

<section class="some-area fill-height-or-more">
  <div>
      <h1>LEFT</h1>

  </div>
  <div>
      <h2>Two</h2>
      <p>This Column should</p>
      <p>only be as width as</p>
      <p>its content.</p>
  </div>
  <div>
      <h2>RIGHT</h2>
  </div>
</section>

这篇文章是我previous post的续集。

任务 1：我希望中间列的宽度与其内容一样宽。然后左右列应相等地填充其余空间，以便中间列始终位于中间。

提前感谢您的帮助！

马夫

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以将flex: 1 添加到left 和right div 或在您的情况下为DEMO

.content {
  display: flex;
  height: 100vh;
}
.content > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.left,
.right {
  flex: 1;
  background: lightblue;
}
.middle {
  background: lightgreen;
}

<div class="content">
  <div class="left">Lorem</div>
  <div class="middle">Lorem ipsum dolor sit amet.</div>
  <div class="right">lorem</div>
</div>

【讨论】：

这个版本有中间内容/文字重叠。中间栏应始终与其内容一样宽，左右栏应同化。
文字重叠是什么意思？中间一栏的文字应该保持在一行吗？
是的，文本应该保持在一行，但列宽不适应。
这正是我想要的！谢谢！！

【解决方案2】：

您可以通过在其 CSS 中添加（例如）flex: 0 0 150px; 来为该元素指定一个固定宽度，并且不会缩小或扩大。

.fill-height-or-more {
  min-height: 100%;
  display: flex;
}
.fill-height-or-more > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items : center;
}

.some-area > div {
  padding: 1rem;
}
.some-area > div:nth-child(1) {
  background: #88cc66;
}
.some-area > div:nth-child(2) {
  background: #79b5d2;
  flex: 0 0 150px;

}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > div h1, .some-area > div h2 {
  margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}

html, body {
  height: 100%;
}

<section class="some-area fill-height-or-more">
  <div>
      <h1>LEFT</h1>

  </div>
  <div>
      <h2>Two</h2>
      <p>This Column should</p>
      <p>only be as width as</p>
      <p>its content.</p>
  </div>
  <div>
      <h2>RIGHT</h2>
  </div>
</section>

【讨论】：

【解决方案3】：

你的意思是像this 这样的东西吗？你应该这样做：

.some-area > div:nth-child(2) {
  background: #79b5d2;
  align-self: center;
}

如果您想更改width，您应该这样做：

.some-area > div:nth-child(2) {
      background: #79b5d2;
      flex: 0;
    }

【讨论】：

就像您的第二个示例一样，但不会破坏文本。我尝试使用 display:block 作为文本，但我还是换行了。
然后你应该添加类似：flex: 0 0 auto; 它应该保持你的文字正常。

【解决方案4】：

您可以通过这样做来调整 3 个 div 的大小：

.some-area > div:nth-child(1) {
background: #88cc66;
flex: .4;
}

.some-area > div:nth-child(2) {
background: #79b5d2;
flex: .2;
align-self: center;

}
.some-area > div:nth-child(3) {
 background: #8cbfd9;
 flex: .4;
}

左右 div 将是两倍大，但我不确定这是否是您想要完成的。

【讨论】：

这将是与媒体查询相结合的一种很好的后备方法。
是的，这是一个解决方案，但可能不是最好的。顺便问一下，你有进步吗？