html - 如何使用 flexbox 显示具有不同规则的列？

Question

段落元素中有 3 列:

.foo {
  display: flex;
  align-items: center;
}
.column {
  border: 3px solid blue;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<p class="foo">
  <span class="first column">first</span>
  <span class="second column">second</span>
  <span class="third column">third</span>
</p>

规则是:

• 3 列应该只显示在一行中，并且每一列都可以有很大的字符。
• 第一列最大宽度为 70%
• 第二列最大宽度为 50px
• 如果第一列和第二列占整行，第三列可以不显示

不知道怎么用flex来实现。有人可以给我一些解决方案吗？

Answer 1

.foo {
    display: flex;
}

.first  { flex: 0 1 70%; }        /* can't grow, can shrink, max width 70% */

.second { flex: 0 1 50px; }       /* can't grow, can shrink, max width 50px */

.column {
    border: 1px solid blue;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

<p class="foo">
    <span class="first column">first first first first first first first first first first first first first first first first first first first</span>
    <span class="second column">second second second second second second second second second </span>
    <span class="third column">third third third third third third</span>
</p>