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>

代码笔演示

根据您想要的断点以及“移动”尺寸设计的确切外观，还有一些工作要做……但我认为我已经有了一个相当好的开始。