html - flex 容器内单个元素的全宽

Question

我正在研究响应式设计，我真的不想更改 HTML 标记，而是让我现有的工作正常。

我有一个包含三个元素的容器(一个类别、一个图像缩略图和一个包含文本的 div)。

HTML

<article class="featured">
  <div class="category">
    <a href="/#/#/">Category name</a>
  </div>
  <a href="/my-img/" class="thumb-wrapper">
    <div class="thumb" style="background-image: url(http://my-image-path);"></div>
  </a>
  <div class="text">
    <h2><a href="/#/">Lorem ipsum</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vehicula erat, eget volutpat erat. In imperdiet ligula id mauris convallis aliquet quis congue dui. Integer vulputate erat augue, ac aliquam velit iaculis at. </p>
  </div>
</article>

所以article有3个子元素:div.category、a和div.text

我想让 div.category 整个宽度/max-width:100% 横跨 article 然后我想要 a 和 div.text 使用 flex 并排放置。我已经在其他地方使用了它，但是当 div.category 出现时就不行了。

这是一个小模型

正如我所说，我不想更改 HTML 结构，我想使用 flex，因为这是我在其他地方使用过的。

我的问题是当 div.category 的父级 (article) 应用了 display:flex; 时，它会变成全宽。本质上，我试图覆盖 flex 对 div.category

的影响

JS Fiddle

我已经尝试将 width:100% 应用到类别，然后还应用 flex-shrink:0; 这样它就不会被缩小，但是第二个两个元素不会换行到下一行。并使用 flex-wrap 将它们包裹起来并不会让它们排成一排。

Answer 1

您可以在 .thumb-wrapper 和 .text 上使用 flex: 0 0 50%, 和 flex: 0 0 100% 在 .category 上，并且不要忘记在 article 上设置 flex-wrap: wrap

body, html {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
article {
  display: flex;
  flex-wrap: wrap;
}
.category, .thumb-wrapper, .text {
  border: 1px solid black;
  flex: 0 0 50%;
  padding: 10px;
}
.category {
  flex: 0 0 100%;
}
.thumb-wrapper, .thumb {
  display: flex;
  flex: 1;
  background-position: center;
}

<article class="featured">
  <div class="category">
    <a href="/#/#/">Category name</a>
  </div>
  <a href="/my-img/" class="thumb-wrapper">
    <div class="thumb" style="background-image: url('http://placehold.it/350x150');"></div>
  </a>
  <div class="text">
    <h2><a href="/#/">Lorem ipsum</a></h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet vehicula erat, eget volutpat erat. In imperdiet ligula id mauris convallis aliquet quis congue dui. Integer vulputate erat augue, ac aliquam velit iaculis at.</p>
  </div>
</article>