3列Flex布局 - 中间列仅作为其内容的宽度 [英] 3 Column Flex Layout - Middle Column only as width as it's content

问题描述

我的小提琴到目前为止：

  .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;显示：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>两个< / h2> < p>此列应< / p> < p>只能为< / p> < p>其内容。< / p> < / div> < div> < h2> RIGHT< / h2> < / div>< / section>  

这是我上一篇文章的续篇。 / p>

任务1：我希望中间列的宽度与其内容相同。

提前感谢小时帮助！

Muff

解决方案

您可以添加 flex： 1 > 到 //jsfiddle.net/Lg0wyt9u/651/rel =nofollow> 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>  

My fiddle so far:

.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>

This post is a sequel to my previous post.

Quest 1: I'd like the middle columns to be only as width as its content. The left and right column should then equaly fill the rest of the space so that the middle column always stays in the middle.

Thanks in advance for hour help!

Muff

解决方案

You can just add flex: 1 to left and right divs or in your case 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>

这篇关于3列Flex布局 - 中间列仅作为其内容的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！