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

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

我不知道这在flexbox中是否可行。我只是希望是这样

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

---

好吧……这需要一些调整，可能涉及到比你可能会感到舒服的更多的包装，但我想我已经接近了

基本原则

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

使用

flexbox

我们可以告诉中心列（及其内容div）为固定宽度，而每个侧div是灵活的

侧栏内的内容div为自动宽度，并根据需要使用

flex end/start

等对齐

当媒体查询开始时，行变为列，前面的“column”div变为该列中的行

.row{
显示器：flex；
边缘底部：.5em；
}
.内容{
文本对齐：居中；
颜色：白色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充：1em；
}
上校{
弹性：1；
显示器：flex；
}
.中心{
flex:0350px；
显示器：flex；
边缘：0.5em；
}
.中心.内容{
背景：粉红色；
弹性：1100%；
}
.左{
证明内容：柔性端；
}
.左.内容{
flex:01自动；
背景：蓝色；
}
.对.内容{
flex:01自动；
背景：绿色；
}
@媒体屏幕和屏幕（最大宽度：700px）{
.行{
弯曲方向：立柱；
}
上校{
弹性：1；
证明内容：柔性端；
}
.中心{
保证金：0；
}
}

Lorem ipsum dolor sit amet。
洛勒姆
乱数假文。
Lorem ipsum dolor sit。乱数假文。
洛雷姆·伊普苏姆·多洛。
洛勒姆

您可以创建flex包装，并根据需要对齐颜色框（对我来说这是一个很好的解决方案。）我怀疑这是否可以用单个元素完成。也许有三列吧。基本上。如果正确的元素是“可选”的，那么我必须说“否”。是否有任何HTML结构要求？非可变宽度的值是什么？我不想有3列的主要原因是，当页面宽度太小而无法水平对齐时，我可以垂直对齐3个元素。@jaunt我为您编辑了描述。这很完美。非常感谢。