flex 布局中块级元素没有换行

Question

<div class="A">
  <div>123</div>
  <div>456</div>
</div>

.A {
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
}

div 本来应该是独占一行的，但是加上 flex 布局就‘粘’在一起了，我想过可能是子级元素里的 flex 没有设置好（我后来写的flex: 1），但好像没有赋给 flex 哪个数值是能够使子元素在 flex 布局中独占一行

（其实我一开始用的 <span> 但想到 <span> 本身不会独占一行，但没想到 <div> 也不行）

Answer 1

有挺多种方法的，比如下面的（独立使用）

1. 你给子元素，设置 width:100%
2. 不用row，用垂直flex-direction: column;
3. 你说的子元素 flex方案也行。 flex: 1 0 100%

重点还是你不会flex布局，还是要多学学。

Answer 2

父级display:flex之后，子元素会变成 “inline-flex”，表现为非块级元素， 不具有主动换行的特性，所以 div 默认的块级元素特征会丢失，手动加上 width:100% 就好了。

flex - CSS（层叠样式表） | MDN
Flex 布局教程：语法篇 - 阮一峰的网络日志