logo标签列表

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

cssflexbox
6
我想使用flexbox将页面上的3个元素居中。中间的元素最终是页面的中心，而左右元素的宽度可以变化。请参考下面的图片。

description of centering

我不知道这是否可以使用flexbox实现，但我希望能够实现。

除了我希望在移动设备上或窗口宽度不足以水平对齐元素时能够垂直对齐元素之外，没有真正的结构要求。 元素的移动视图

我怀疑这可以用单个元素完成。也许需要三列。基本上，如果右边的元素是“可选的”，那么我必须说“不”。 - Paulie_D
有HTML结构要求吗？非变量宽度的值是什么？ - jaunt
我不想使用三列的主要原因是当页面宽度变得太小以至于无法水平对齐时，我可以垂直地对齐这三个元素。 - Tyler Graf
@jaunt 我已经为您编辑了描述。 - Tyler Graf
@Paulie_D 是的，它是固定宽度。 - Tyler Graf
显示剩余3条评论
1个回答
6

好的...需要进行一些微调，可能涉及到更多的包装器，但我认为我已经接近了。

基本原则

我们需要行，每行都包含三列。每个列div都拥有一个“content” div，其中包含实际内容（因此具有背景颜色）。

使用flexbox，我们可以告诉中间列（以及它的内容div）要固定宽度，而每个侧面div则是灵活的。

侧面列内部的内容div是自动宽度的，并且使用flex-end/start等进行对齐。

当媒体查询启动时，行变成列，之前的“column” 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演示

根据您需要的断点和“移动”尺寸设计的具体外观，仍需进行一些工作...但我认为我已经有了一个相当不错的开始。

1
这非常完美。谢谢！ - Tyler Graf
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接