Question

给定一个div显示flexbox $(document).ready(function(){ $(".cont").click(function(){ alert("test"); }); });（运行并查看下面的代码段）和深度嵌套的div $(document).ready(function(){ showDiv(); }); function showDiv() { alert("test"); }，如何将深层嵌套的div相对于.wrapper居中，而不是相对于其父.text-container？

在下面的代码段中，有两列高度相等，我希望文本（位于每列内的可变高度div）处于同一级别。我已将变量高度div的显示也设置为.wrapper，因此逻辑上文本相对于它而不是祖父母.variable-height，这不是我想要的。

我提出的唯一解决方案是在flexbox和.wrapper上设置position: relative;：

.wrapper

但是，我不确定，如果混合flexbox和绝对/相对定位是个好主意。

.text-container

position: absolute;
top: 50%;
transform: translateY(-50%);

Answer 1

但是，我不确定，如果混合flexbox和绝对/相对定位是个好主意。

嗯，这取决于您可以接受的行为。

绝对定位元素时，将其从文档流中删除。

因此，在这种情况下，.wrapper及其弹性项目不知道.text-container存在。如果容器或项目具有任何灵活性，它们将与.text-container重叠。见图：

Centering: Absolute Positioning vs Flexbox（重新调整窗口大小以查看差异）

同样，如果您可以接受重叠，那么绝对定位就可以了。

就flexbox规范而言，将绝对/相对定位与flex属性混合没有任何问题。该规范有关于此主题的部分：

4.1. Absolutely-Positioned Flex Children

Flex容器的绝对定位子项不参与flex布局。但是，它确实参与了重新排序步骤（请参阅order），这对他们的绘画顺序有影响。

确定弹性容器的绝对定位的子级的静态位置，使得子级被定位为好像它是弹性容器中的唯一弹性项目，假设子级和弹性容器都是固定大小的盒子他们用过的尺寸。

这样做的结果是，如果您在弹性容器的绝对定位的子级上设置align-content: center;，则子级的静态位置会将其置于弹性容器的横轴中。

规范要注意两件事：

虽然从文档流中删除了绝对定位的flex项（如预期的那样），但仍然可以识别order属性。
您仍然可以使用弹性属性来定位绝对定位的弹性项目，但仅限于某些情况下仅在父级容器内，而不是祖父级。

如何垂直居中div相对于flexbox祖父母？

1 个答案: