H5W3
当前位置:H5W3 > 问答 > 正文

flex布局div元素不换行问题

<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> 也不行)

 

回答:

有挺多种方法的,比如下面的(独立使用)

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

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

本文地址:H5W3 » flex布局div元素不换行问题