Question

我有一个列表，我想在用户的屏幕上显示，并允许他通过拖放重新排序。这部分正在运作。

我正在尝试在多个列中显示列表，因为有时候只有一个列中显示的选项太多（元素数量不同）。

我使用了flexbox这样做，但是我无法将列表置于中心位置，Flex容器尺寸不适合其内容。

.params-order.overlay {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(30,30,30, 0.8);
    z-index: 999999;
    justify-content: center;
    align-items: center;
}

.overlay-title {
  margin: 5% 5% 2%;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 2px black;
}

.params-list {
  display: inline-flex;
  margin: 5%;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.params-list-item {
  background-color: rgb(240, 240, 240);
  border-radius: 5px;
  padding: 5px 15px 5px 25px;
  margin: 10px;
  list-style-type: none;
  width: 200px;
  position: relative;
  font-size: 1.4em;
  cursor: move;
}

.params-list-item::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 19%;
  height: 64%;
  width: 6px;
  border: 2px dotted #999;
  border-top-width: 0;
  border-bottom-width: 0;
  box-shadow: none;
}

<div class="overlay params-order">
  <h3 class="overlay-title">Overlay title</h3>
  <ul class="params-list">
    <li class="params-list-item">Draggable 1</li>
    <li class="params-list-item">Draggable 2</li>
    <li class="params-list-item">Draggable 3</li>
    <li class="params-list-item">Draggable 4</li>
    <li class="params-list-item">Draggable 5</li>
    <li class="params-list-item">Draggable 6</li>
    <li class="params-list-item">Draggable 7</li>
    <li class="params-list-item">Draggable 8</li>
    <li class="params-list-item">Draggable 9</li>
    <li class="params-list-item">Draggable 10</li>
    <li class="params-list-item">Draggable 11</li>
    <li class="params-list-item">Draggable 12</li>
    <li class="params-list-item">Draggable 13</li>
  </ul>
</div>

我提供了一个codepen：http://codepen.io/anon/pen/GpEGqd

我已经能够通过在.params列表中添加self-align: stretch;来实现它，但它使得它占用了所有宽度，我不希望这样，因为我使用了params-list来跟踪点击并删除叠加层。

如何修复路线？

Answer 1

我正在尝试在多个列中显示列表，因为有时候只有一个列中显示的选项太多（元素数量不同）。

我使用了flexbox这样做，但是我无法将列表置于中心位置，Flex容器尺寸不适合其内容。

您的列表已经水平居中作为单个列。我对你的问题的理解是你希望列包装时列表保持居中。

列表未换行的原因是您尚未定义容器的高度。因此，列表将无限期地堆叠在一个列中，因为没有高度限制。

第二个问题是宽度。要将嵌套的flexbox置于容器中心，您需要定义引用框架（即指定容器的宽度）。

试试这个：

.params-list {
    display: flex;
    margin: 5%;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    height: 300px; /* NEW */
    width: 100%; /* NEW */
}

该列现在包装，因为它有一个高度限制，并且中心沿容器的整个宽度发生。

DEMO：http://codepen.io/anon/pen/jbwpyV

更新

问题评论：

width: 100%执行此任务，但我不希望我的列表在不需要的情况下获取100％，因为我正在跟踪其外部的点击以了解何时删除叠加层。是否可以使.params-list宽度适合其内容？

嗯，您要求嵌套的Flexbox与column对齐方式在容器中水平居中。为了居中，您需要定义容器的width，即width: 100%。如果仅将.params-list限制为其内容的宽度，则仍未定义用于在容器中居中的参考框架。有多列的.params-list仍需要知道：我应该在哪里居中？

您可以在演示中添加并删除width: 100%中的.params-list来测试此内容。

DEMO：http://codepen.io/anon/pen/jbwpyV

但是，如果将flex-direction更改为row，则flex项将堆叠并换行，并仅占用所需的宽度。换句话说，您无需定义width。

DEMO：http://codepen.io/anon/pen/QjgBVv

否则，您可能需要考虑其他解决方案：

How to make div not larger than its contents?

使包裹的柔性容器居中

1 个答案: