フレックスボックスを使用して異なるルールの列を表示する方法は？

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％である
• 第一及び第二の列は行全体を

Iをとる場合には、第2の列の最大幅は、第3列はどれも表示することができないは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>