html - 如何使用 FLEX 在 CSS 中包装 div

Question

我有下面的代码，它在同一行中放置了 3 个元素——一个 div、一个文本框和另一个 div:https://jsfiddle.net/Luz1myc3/1/ .我正在尝试使用 CSS -

div.parent{
    display:flex;

}

我的问题 - 我试图将第三个 div(第二行的长文本)换行到文本框，然后其余的长文本应该出现在第一个 div 正下方的下一行(第一行)。预期的格式如下 -

如果这可以用 flex 解决，我会很高兴。也欢迎任何其他建议。

Answer 1

使用 CSS Flex 执行此操作似乎非常不切实际，Flex 并非用于重现此类布局。您想要实现的目标是让文本在您使用 Flex 时不会填充的区域中流动，除非您将其定位为 absolute 但这是完美定位它的另一个挑战。

实现此布局的最佳选择是使用旧的 display: inline; 属性。

div.parent{
    display: block;
}

div.parent > div {
  display: inline;
  vertical-align: top;
  line-height: 1;
}

https://jsfiddle.net/Luz1myc3/2/

文本似乎没有像您希望的那样换行，所以另一种方法是使用 float。

div.parent{
    display: block;
}

div.parent > div {
  float: left;
}

div.parent > div.child {
  float: none;
}

https://jsfiddle.net/Luz1myc3/4/