html - 使列内容宽度，而不是宽度 : 100%

Question

我把flex-direction: column和flex-wrap: wrap for ul实现columns。

如果 ul 将元素分成几列，则它们的宽度为列中最宽的 li 内容。但如果只有一列，它的宽度为 100%。

我想要的是让这一列与其内容一样大。

/* boilerplate */

* {
  margin: 0;
  padding: 0;
}

div {
  max-height: 100px;
  background-color: #cacaca;
}

ul {
  list-style-type: none;
  height: 100px;
  background-color: #dadada;
}

li {
  margin-right: 10px;
  background-color: #eaeaea;
}


/* actual code */

div {}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}

li {}

<div>
  <ul>
    <li>normal</li>
    <li>x</li>
    <li>y</li>
    <li>z</li>
    <li>short</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>wiiiiiiiiiiiiiiide</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>normal</li>
    <li>just two</li>
  </ul>
</div>

<div>
  <ul>
    <li>why</li>
    <li>full</li>
    <li>width?</li>
  </ul>
</div>

https://codepen.io/anon/pen/eRYjLd

Answer 1

使用 display: inline-flex 代替 display: flex。

这会将容器从 block 级(占用其父级的整个宽度)切换到行内级(占用其内容的宽度)。

这种调整大小的行为类似于 display: block 与 display: inline-block。

或

使用 justify-content: center 使父 div 成为 flex 容器。

这将 ul flex 容器限制为 flex 元素的宽度，其默认值为 flex-basis: auto(内容宽度)。

/* boilerplate */

* {
  margin: 0;
  padding: 0;
}

div {
  max-height: 100px;
  background-color: #cacaca;
}

ul {
  list-style-type: none;
  height: 100px;
  background-color: #dadada;
}

li {
  margin-right: 10px;
  background-color: #eaeaea;
}


/* actual code */

div {
  display: flex;             /* NEW */
  justify-content: center;   /* NEW */
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
}

li {}

<div>
  <ul>
    <li>normal</li>
    <li>x</li>
    <li>y</li>
    <li>z</li>
    <li>short</li>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>wiiiiiiiiiiiiiiide</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>normal</li>
    <li>just two</li>
  </ul>
</div>

<div>
  <ul>
    <li>why</li>
    <li>full</li>
    <li>width?</li>
  </ul>
</div>