使列内容宽度，而不是宽度：100％

Question

我为flex-direction: column添加了flex-wrap: wrap和ul来实现列。

如果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: flex使用display: inline-flex。

这会将容器从块级别（取其父级的全宽）切换到内联级别（取其内容的宽度）。

此调整行为类似于display: block与display: inline-block。

OR

将父div设为具有justify-content: center的弹性容器。

这将ul弹性容器限制为弹性项目的宽度，其默认值为flex-basis: auto（内容宽度）。

＆＃13;

＆＃13;

/* 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 {}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;