如何使子 div 在其 flexbox 父容器换行之前换行?

3
我试着让行中的最后一个div在被换到下一行之前,先在自己内部换行。
<div class="flexcontainer">

        <div class="col1">this is text</div>
        <div class="col2">this is text</div>
        <div class="col3">
          <div class="contents m1">This is some other text</div>
          <div class="contents m2">This is some other text</div>
          <div class="contents m3">This is some other text</div>
        </div>

</div>

.flexcontainer{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.col3{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}
.contents{
  display:inline-block;
}

这是我正在处理的代码。 jsfiddle 示例

这是我发布的简化后的代码。 simplified code

我不确定之前做了什么。我曾经能够创建一个三列弹性容器,其中最后一个子元素在其容器换行之前会自动换行,但我似乎找不到以前如何实现它的解决方案。


我希望内容以行的形式显示。 - Vch Cvh Hvc
你想做什么?你想让三个div在同一行吗? - Amaresh S M
我希望最后一个 div 的内容在 flex 容器换行之前就被包裹。 - Vch Cvh Hvc
基本上,我希望最后一个 div 具有尽可能多的 div,以适应其动态宽度。 - Vch Cvh Hvc
但实际上发生的是整个列在其内容被换行之前就被换行了。 - Vch Cvh Hvc
没关系,还没有解决。 - Vch Cvh Hvc
2个回答

3

我希望这是您期待的 - "使子 div 在其 flexbox 容器换行之前换行"。

使用 flex: shrink | wrap | basis 属性和 flex-wrap 属性包装 div 内容。

.flexcontainer {
  display: flex;
  flex-direction: row;
  background-color: lightgrey;
  flex-wrap:wrap;
}

.flexcontainer>div {
  flex: 1 1 0;
}

.col3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: red;
}

.contents {
  display: inline-block;
}
<div class="flexcontainer">
  <div class="col1">This is text</div>
  <div class="col2">this is text >> IT WILL BREAK AFTER HERE | | | </div>
  <div class="col3">
    <div class="contents m1">This is some other text</div>
    <div class="contents m2">This is some other text</div>
    <div class="contents m3">This is some other text</div>
    <div class="contents m3">This is some other text</div>
  </div>

</div>


这很接近。最后一个 div 做了它应该做的事情,但整个容器没有。主容器也应该包装其 div 内容。 - Vch Cvh Hvc
请发布预期输出图像 @VchCvhHvc - Amaresh S M
这是我期望内容交互的方式:https://jsfiddle.net/2tmeswj5/1/。我会使用这个修复方法,但为了使用它,每一列都必须有一个指定的宽度。这会导致问题,因为我不想为每一列指定宽度,否则它将无法响应式地呈现。 - Vch Cvh Hvc
它的解决方法类似于网格布局上的自动适应,但问题在于您需要指定宽度。如果宽度应是动态的,则会出现问题。 - Vch Cvh Hvc
@VchCvhHvc 我认为在网格中,您还需要指定最小宽度 - repeat(auto-fit, minmax(186px, 1fr)); - Amaresh S M
如果您不想指定宽度,可以设置flex:1 1 0; 现在请检查我的回答 @VchCvhHvc 我已经移除了宽度。 - Amaresh S M

-2

我认为容器元素中的.col3类名是重复的。

如果您将其删除,它应该会使内容变成3列。


它具有这些属性,因为我希望.col3内部的div显示为一行,而不是自动换行到下一行。 - Vch Cvh Hvc

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接