html - 标签在 flex 容器内时输出错误

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;}

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

https://jsfiddle.net/4025gLo8/4/ - wih flex(元素居中但有问题)

https://jsfiddle.net/b8amyfog/4/ - 没有 flex(正确的格式，但没有 align-items:center; 或 align-self:stretch; 等)

Answer 1

如果我没有正确理解您的问题，您希望从第二个 fiddle 到第 3 行中的所有内容都与容器的中心对齐。如果那是你想要的，我想这个 fiddle 可能会解决你的问题:https://jsfiddle.net/mk3xh1fe/

^ 让我知道这是否是您要找的。

问题是，因为您使用的是 display: flex在 div 上，并且该 div 中有几个元素，需要告诉它们对齐为 column而不是 row (这是默认值)。

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

希望这对您有所帮助!