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;是默认设置，因此您可以省略它。

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以在margin-left: auto上使用:after代替。

＆＃13;

.container {
  display: flex;
  align-items: center;
  border: 1px solid black;
}

.container:after {
  content: 'y';
  margin-left: auto;
  padding: 5px;
}

.container:before {
  content: 'x';
  padding: 5px;
}

＆＃13;

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

＆＃13;

Flex：如何将样式应用于文本子项

2 个答案: