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有三个子元素：div.category，a和div.text

我希望div.category在max-width:100%之间设置全宽/ article，然后我希望a和div.text使用flex坐在彼此旁边。我已经在其他地方工作了，但在div.category出现时却没有。

这里有点模拟

Informix environment variables with the IBM Informix JDBC Driver

正如我所说，我不想改变HTML结构，我想使用flex，因为这是我在别处使用过的。

我的问题是当其父（div.category）已应用article时，display:flex;全宽。基本上我试图覆盖flex对div.category

的影响

我尝试将width:100%应用于该类别，然后同时应用flex-shrink:0;以使其无法收缩，但后两个元素不会换行到下一行。使用flex-wrap使它们换行并不会让它们排成一排。

Answer 1

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

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>