Flexbox - 水平居中3个元素，但在中心元素上对齐

Question

我想使用flexbox将3个元素集中在一个页面上。中间元素最终是页面的中心，而左右元素的宽度可以不同。请参考下图。

我不知道flexbox是否可以实现这一点。我只是喜欢它。

除了我希望能够在移动设备上垂直对齐元素时，或者只要窗口宽度太小而无法水平对齐，就没有真正的结构要求。

Answer 1

好的......需要一些调整，可能需要更多的包装，而不是你可能会感到满意，但我想我已经接近了。

基本原则

我们需要行，每行包含三个列。每个列div都包含一个“内容”div，它接收实际内容（以及bg颜色）。

使用flexbox我们可以告诉中心列（及其内容div）是固定宽度，而每个边div都是灵活的。

侧栏内的内容div是自动宽度，并根据需要使用flex-end/start等对齐。

当媒体查询启动时，行将成为列而前一个“列”div成为该列中的行。

.row {
  display: flex;
  margin-bottom: .5em;
}

.content {
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}

.col {
  flex: 1;
  display: flex;
}



.center {
  flex: 0 0 350px;
  display: flex;
  margin: 0 .5em;
}

.center .content {
  background: pink;
  flex: 1 1 100%;
}

.left {
  justify-content: flex-end;
}

.left .content {
  flex: 0 1 auto;
  background: blue;
}

.right .content {
  flex: 0 1 auto;
  background: green;
}

@media screen and (max-width:700px) {
  .row {
    flex-direction: column;
  }
  
  .col {
    flex: 1;
    justify-content: flex-end;
  }
  
 
  .center {
 margin: 0;
  }
}

<div class="container">
  <div class="row">
    <div class="col left">
      <div class="content">Lorem ipsum dolor sit amet.</div>
    </div>
    <div class="col center">
      <div class="content">Lorem </div>
    </div>
    <div class="col right">
      <div class="content">Lorem ipsum.</div>
    </div>
  </div>
    <div class="row">
    <div class="col left">
      <div class="content">Lorem ipsum dolor sit. Lorem ipsum.</div>
    </div>
    <div class="col center">
      <div class="content">Lorem ipsum dolor.</div>
    </div>
    <div class="col right">
      <div class="content">Lorem</div>
    </div>
  </div>
</div>

Codepen Demo

还有一些工作要做，取决于你想要的断点，以及'移动'大小的设计看起来如何......但我认为我已经取得了相当不错的开始。