3 Column Flex Layout - Middle Column only as width as it's content

问题

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

回答1:

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>

回答2:

Do you mean something like this? You should do:

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

If you want to change the width you should do:

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

回答3:

You can assign a fixed width and no shrink or grow to that element by adding (for example) flex: 0 0 150px; to its CSS.

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

回答4:

You could play with the sizes of your 3 div's by doing for example so:

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

The left and right div would be twice as big, I'm not sure though if that is what you are trying to accomplish.

来源：https://stackoverflow.com/questions/36889902/3-column-flex-layout-middle-column-only-as-width-as-its-content

标签

html

css

flexbox