html - 柔性 : how to apply styles to text child

Question

给定以下 HTML 片段...

<div class="container">
  Hello, World!
</div>

...我想实现这样的布局...

+----------------------------------------------------+
| x | Hello, World!                              | y |
+----------------------------------------------------+

...使用 flexbox 布局且不更改 HTML 结构。

我的 SCSS 看起来像这样:

.container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    &:before {
        content: 'x';
    }

    &:after {
        content: 'x';
    }
}

除了文本内容水平居中而不是左对齐之外，这几乎是正确的。

通常我会简单地将 flex-grow: 1 应用于我希望全宽的内容，但在这种情况下根本没有内容节点。

那么，怎样才能让文本内容变大呢？谢谢!

Answer 1

在这种情况下，文本没有包装在它自己的元素中，Flexbox 会创建一个匿名包装器，它不能使用 CSS 定位。

一种解决方案是删除 justify-content 并使用 auto margins相反，在 ::after 伪元素上，如下所示，另一个是将第一个伪 ::before 绝对定位。

请注意，因为 flex-direction: row; 是默认值，您可以省略它。

堆栈片段

.container {
  display: flex;
}

.container:before {
  content: 'x';
}

.container:after {
  content: 'x';
  margin-left: auto;
}

<div class="container">
  Hello, World!
</div>