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

Question

段落元素中有3列：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

规则是：

• 3列应仅显示在一行中，并且每列中都可能包含大字符。
• 第一列max-width为70％
• 第二列max-width是50px
• 如果第一列和第二列占据整行
，则第三列可以显示为none

我不知道如何通过使用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>