弹性项目不包装

Question

我已经给 ul 一个固定的宽度，并希望 li 在 ul 达到最大宽度时向下流动。

我的HTML - 这里List 3 and List 4应该流下来。即从 List 1 and List 2

正下方开始

.dropdown-menu>li {
  display: inline-block;
  float: left;
}

.open>ul {
  display: inline-flex !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Drop it
    </button>
  <ul class="dropdown-menu" role="menu" style="width:50px">
    <li>
      <a href="#">List 1</a>
    </li>
    <li>
      <a href="#">List 2</a>
    </li>
    <li>
      <a href="#">List 3</a>
    </li>
    <li>
      <a href="#">List 4</a>
    </li>
  </ul>
</div>

Answer 1

我不确定您为什么要使用 inline-flex，而是将 .open>ul 更改为显示：inline-block；产生我认为你正在寻找的结果。希望我能帮上忙！

Answer 2

在您的演示中，将 flex-wrap: wrap; 添加到 flex 容器。

默认值为nowrap。

Revised Demo

来自 MDN：

flex-wrap

The CSS flex-wrap property specifies whether flex items are forced into a single line or can be wrapped onto multiple lines.

Initial value: nowrap

Applies to: flex containers

弹性项目不包装

flex items are not wrapping

html

css

flexbox