複数のスパン要素を持つ複数のスパン要素を複数の行に入れて

Question

という名前を付けると、私はブートストラップclass = "column"を持つdivを持っていることを示唆しています。固定数はありません。
my列の幅は固定されていますが、スパンが複数の行に分割される可能性があります。要素が多すぎたり、ユーザーがズームしたりすると、複数の行にスパンが表示されます。
ここでは難しい部分があります。各行のスパンを伸ばして線を埋めるようにします。出来ますか？私はstayle = "display：flex"を試しましたが、flexが大きすぎるとスパンが外れてしまいます。

|---------------------------| 
|<aaaaaaaaa><ddddddddd><fff>| 
|<sdf><sdfsd><sdf ><sdfsdf >| 
|< sd >< sdf ><sd>| 
|---------------------------| 

Answer 1

はい、それは可能である： （コードは少し厄介かつ複雑であるため、申し訳ありませんが、私はバイオリンを持っていない） ここでは<>がスパンと空間でのデモです。

をtext-align:justifyとし、spanの要素をdisplay:inline-blockとします。そう、

.col:after { 
    content: ""; 
    display:table; 
    width: 100%; 
} 

これは、本質的に作成する別のラインを強制的に：

最後の行の要素が適切に整列するようにするトリックは、列に:after擬似要素を使用して、それを次のコードを与えることです前の行 - spanの最後の行が正当化されます。 https://jsfiddle.net/3kem9asp/3/

編集：ここでは

は作業フィドルである私は、テーブルにインラインブロックを変更：擬似要素の後、最後の行をクリアします。