Question

flexbox出现问题。每当我在格式（可见输出）中放入一些标签是错误的。

HTML：

<div class="container">
  <div class="line1"><div class="one">IMG</div></div>
  <div class="line2">Some text here.</div>
  <div class="line3">Cause of A tag [Cause of A tag] <br><a> (this is inside A tag) [(this is inside A tag)] </a><br> flexbox is displayed wrong [flexbox is displayed wrong]</div>
</div>

CSS：

.container
{background:black;
padding:10px;
display:flex;}

.line1
{border:2px solid blue;
padding:10px;
background:yellow;}

.line2
{display:flex;
align-items:center;
align-self:stretch;
border:3px solid blue;
padding:10px;
background:yellow;}

.line3
{display:flex;
align-items:center;
align-self:stretch;
border:3px solid blue;
padding:10px;
background:yellow;}

.one
{padding:10px;
background:red;}

我想做的是在 .line3 上 align-items：center; ，但是我需要设置 display：flex; 这样做。但是格式不见了……并且周围还有一些空间。

https://jsfiddle.net/4025gLo8/4/-具有柔韧性（项目居中但存在问题）

https://jsfiddle.net/b8amyfog/4/-不包含flex（格式正确，但不包含align-items：center；或align-self：stretch;等）

Answer 1

如果我正确理解了您的问题，则您希望第二个小提琴和第3行中的内容都与容器的中心对齐。如果那是您想要的，我认为这个小提琴可能会解决您的问题：https://jsfiddle.net/mk3xh1fe/

^让我知道您是否正在寻找它。

问题在于，由于您在div上使用display: flex，并且该div中有多个元素，因此需要告知它们以column而不是{{ 1}}（默认设置）。

此外，我在这里对您的CSS强制执行了一些代码样式规则，以遵循标准，并且在我看来，这使CSS更具可读性。

希望这会有所帮助！

Flex容器内有标签时输出错误

1 个答案: