<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>
也不行)
有挺多种方法的,比如下面的(独立使用)
- 你给子元素,设置
width:100%
- 不用row,用垂直
flex-direction: column;
- 你说的子元素 flex方案也行。
flex: 1 0 100%
重点还是你不会flex布局,还是要多学学。
###父级display:flex
之后,子元素会变成 “inline-flex
”,表现为非块级元素, 不具有主动换行的特性,所以 div
默认的块级元素特征会丢失,手动加上 width:100%
就好了。