Question

到目前为止我的小提琴：

＆＃13;

Write

＆＃13;

Response

＆＃13;

这篇文章是我.removeClass()的续集。

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

提前感谢您提供小时帮助！

莫夫

Answer 1

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

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

如果您想更改应该执行的width：

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

Answer 2

您只需将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>

Answer 3

您可以通过向其CSS添加（例如）flex: 0 0 150px;来为该元素指定固定宽度而不缩小或增长。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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将是两倍大，我不确定这是否是你想要完成的。

3列Flex布局 - 中间列仅作为其内容的宽度

4 个答案: