html - CSS flex - 是否可以在不使用容器的情况下将

Question

一个非常常见的包含图像、标题和文本的元素是

<div class="mediaelement">
<img src="http://placekitten.com/g/500/500" />
<h1>The title. Unknown length.</h1>
<p>And the description. Which could also span multiple lines.</p>
</div>

现在 display: flex 似乎是一种非常灵活的居中和显示元素的方式。例如，使用 order 属性，我可以在不触及 dom 的情况下将标题移动到图像之前。

但是是否可以将 h1 和 p 垂直对齐到图像而不将其放入另一个容器中？仅使用 css？

像这样:http://imgur.com/draDl2q

如果我将它们放入容器中，我无法将 h1 移动到具有 flex order 值的图像之前。

Answer 1

是的，它是......有一个条件。您需要知道父元素的高度。

基本上，您需要带环绕的列布局。为了让 parent 知道什么时候包裹你必须有一个有限的高度......否则它就不会包裹。

.mediaelement {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
  justify-content: center;
}

<div class="mediaelement">
  <img src="http://placekitten.com/g/200/200" />
  <h1>The title. Unknown length.</h1>
  <p>And the description. Which could also span multiple lines.</p>
</div>

一旦 display:contents 获得支持，这种摆弄将变得不必要，因为可以根据需要从容器中包装和解包元素。