Question

我有弹性柱包装的问题。我需要动态添加内容。

可能是1或6个项目应位于块的中心。所以我需要一个灵活的<ul>。

但是当我使用列换行和<ul>时，我不想伸展，<li>溢出。每个<li>应该左对齐。到目前为止，我找不到任何解决方法。

.block {
  max-height: 60px;
  width: 500px;
  background-color: grey;
  display:flex;
  justify-content: center;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column wrap;
  border: 1px solid red
}
li {
  tex-decoration:none;
  list-style:none
}

<div class='block'>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Answer 1

我在评论中先前建议的修改应用时应如下所示：

.block {
  display:flex;
  width: 500px;
  max-height: 60px;
  margin: 0;
  padding: 0;
  flex-flow: column wrap;
  justify-content: center;
  background-color: grey;
  border: 1px solid red
}

li {
  tex-decoration:none;
  list-style:none
}

<div>
   <ul class='block'>
    <li>Tag_name_1</li>
    <li>Tag_name_2</li>
    <li>Tag_name_3</li>
    <li>Tag_name_4</li>
    <li>Tag_name_5</li>
  </ul>
</div>

下面的代码段与您在打印屏幕中的内容非常接近。 flex只会影响直接子节点，在本例中为<li>项。这就是您需要将 .block 类应用于<ul>元素的原因。

有关Flexbox如何在此处工作的更多信息：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Answer 2

您需要 flex-direction成为专栏吗？如果没有，只需将<li>的{{1}}设置为50％。

flex-basis

.block {
  width: 300px;
  background-color: grey;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red
}

li {
  list-style: none;
  flex: 1 1 50%;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
}

.color-block {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 10px;
}

Flex柱包裹块不会拉伸

2 个答案: