Question

当我尝试在flex容器中插入块元素时，它们都保持在同一行，就像它们是内联块一样。

我希望两个第一个div在同一行，而最后一个在第二行。可悲的是，这似乎不起作用。

有人有任何想法吗？

＆＃13;

<div style="display: flex">
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: inline-block">
    This is an inline block element
  </div>
  <div style="display: block">
    This is a block element
  </div>
</div>

＆＃13;

Answer 1

Flex容器的初始设置为flex-wrap: nowrap。这意味着Flex项目被强制保留在一行中。

您可以使用flex-wrap: wrap覆盖默认值。

在flex布局中忽略弹性项目的display值。

Flex容器是display: flex或display: inline-flex的元素，它建立flex formatting context。虽然类似于block formatting context，但也存在差异。

一个区别是flex容器的子节点忽略display属性。

另一个区别是，在弹性容器中，边距不会崩溃，float和clear属性也无效。

Flex容器还附带了几个默认设置。其中：

justify-content: flex-start - 弹出项目将叠加在行的开头
flex-shrink: 1 - 允许灵活项目缩小，不会溢出容器
align-items: stretch - flex项目将展开以涵盖容器的交叉大小
flex-direction: row - 弹性项目将水平对齐
flex-wrap: nowrap - Flex项目被强制保留在一行

请注意最后两项。

Flex项目将排成行并且无法换行。

如果您希望第一行有两个弹性项目，第二行有第三个项目，请允许容器与flex-wrap: wrap成多行。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 0 0 45%;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
  border: 1px solid #ccc;
}

＆＃13;

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

此外，如果您希望Flex容器以内嵌方式显示，请使用display: inline-flex而不是display: flex。这些与display: inline-block和display: block相当。

Answer 2

在父级中使用flex-wrap:wrap，因为默认情况下flex-wrap为nowrap
在子节点中使用flex-basis:50%来划分相同大小的两个内联块元素。

在本文中查看有关flexbox的更多详细信息：A Complete Guide to Flexbox

*,
*::before,
*::after {
  box-sizing: border-box
}
body {
  margin: 0
}
.flex {
  display: flex;
  flex-wrap: wrap
}
.flex div {
  flex: 0 50%; /*change to 1 50% to see the difference */
  border: 1px solid black;
  padding: 10px
}

<div class="flex">
  <div>
    This is an inline block element
  </div>
  <div>
    This is an inline block element
  </div>
  <div>
    This is a block element
  </div>
</div>

Flex容器中的元素不包装

2 个答案: