html - 使用 Flexbox 创建适合内容的两列布局

Question

我有一个两列布局。第 1 列是标题。第 2 列是一个列表。

我希望列适合内容。 (例如，第 1 列应与其内容一样宽)

我还希望列表是水平的。

我想使用 Flexbox，这样我就可以更改列表中的元素并相应地调整布局。

例如所以它看起来像这样:

我该怎么做？

这是我的代码( Codepen is here ):

<div class="wrapper">
<nav class="topics"> 
<span class="unit unit-header">Topics: </span>
<ul id="list" class="list unit">
  <li><a href="#">All</a></li>
  <li><a href="#">Topic 1</a></li>
  <li><a href="#">Topic 2</a></li>
  <li><a href="#">Topic 3</a></li>
  <li><a href="#">Topic 4</a></li>
  <li><a href="#">Topic 5</a></li>
  <li><a href="#">Topic 5</a></li>
  </ul>
</nav>
</div>

.wrapper {
  width: 960px;
  margin: auto;
  padding-top:20px;
}

.topics {
  display: flex;
}

.unit {
  flex: 1 auto;
}

.list {
  display:flex;  
}

.list li {
  flex: 1 auto;
}

如果我添加以下代码，它将起作用:

.unit-header {
  display: table;
  padding-right: 5%;
}

但是，混合表格和 flex-box 对我来说似乎有点老套。有没有更好的办法？

Answer 1

你试过用这个代替吗？

.unit-header {
  flex: 0 1 auto;
}

上述简写属性的意思是:

flex-grow: 0

flex-shrink: 1

flex-basis: auto