首页 文章

Flex容器内的单个项目的全宽

提问于
浏览 次
2

我正在开发一个响应式设计，我真的不想改变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 坐在 article 的全宽/ max-width:100% 然后我想让 a 和 div.text 使用flex坐在一起 . 我已经在其他地方工作了，但是当 div.category 存在时却没有 .

这是一个小模型

enter image description here

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

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

JS Fiddle

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

html css css3 flexbox

1 回答

  • 2

    您可以在 .thumb-wrapper 和_628225_上使用 flex: 0 0 50% ，在 .category 上使用 flex: 0 0 100% ，并且不要忘记在 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>
    回复于

相关问题