Flexbox: Flexbox-基本: 100%；不分线。

Question

我希望在第一次选择之后中断行。我试过弯曲基础: 100%和宽度: 100%。这没什么用。我还给html和body元素的宽度为100%。这也于事无补。我的错误在哪里？

这是我的代码：

​

html, body {
  width:100%;
}

.flex {
  display:flex;
  width:100%;
}

.flex > div {
  flex-basis:100%;
}

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

​

Answer 1

您还需要在Flex容器元素上添加flex-wrap: wrap，以便flex-items可以拆分成多行，或者在您的示例中也可以使用flex-direction: column。

​

.flex {
  display:flex;
  flex-wrap: wrap;
}

.flex > div {
  flex-basis:100%;
}

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

​