Flex布局中flex-basis:100%无法实现换行，请求排查问题

嘿，我来帮你拆解下问题：你现在的代码里，span和select是放在同一个flex子容器（那个带flex-basis:100%的div）里的，而这个子容器内部的元素属于行内/行内块级元素，默认会并排显示。你给这个子容器设置flex-basis:100%只是让它占满外层flex容器的宽度，但完全不会影响它内部元素的排列规则——这就是为什么你之前的设置没效果的原因。

下面给你两种简单的解决思路：

方案一：让select独占一行（无需修改HTML结构） #

直接给select设置display:block，强制它成为块级元素，这样就会自动换行到span的下方：

html, body { width:100%; }
.flex { display:flex; width:100%; }
.flex > div { flex-basis:100%; }
/* 新增这行 */
.flex > div select { display: block; }

方案二：利用flex换行特性（调整HTML结构） #

如果想通过flex布局来实现换行，可以把span和select分别放在独立的flex子项里，同时给外层flex容器加上flex-wrap:wrap（允许子项换行）：

html, body { width:100%; }
.flex { 
  display:flex; 
  width:100%; 
  flex-wrap: wrap; /* 关键：开启flex换行 */
}
.flex > div { flex-basis:100%; }

对应的HTML结构调整为：

<div class="flex">
  <div>
    <span>Lorem Ipsum</span>
  </div>
  <div>
    <select name="" id="">
      <option value="loremIpsum">Lorem Ipsum</option>
    </select>
  </div>
</div>

这样两个子项各自占满容器宽度，就会自动上下排列啦～

内容的提问来源于stack exchange，提问作者user9225569