flex布局下實現(xiàn)問題兩端對齊

<div style="width:200px;height:20px;border:1px solid red;display: flex;justify-content:space-between"><span>Canvas繪制弧線</span><span>入門示例</span></div>
要實現(xiàn)這種效果？

可以用text-align: justify 但是justify也會存在問題，詳見鏈接描述

搬運：

因為text-align不會處理被打斷的行和最后一行。因為你這里的文字只占了一行，所以也是最后一行了，所以text-align設置為justify不會產(chǎn)生任何效果。
解決方法是使用text-align-last，并將其設置為justify。
不過不幸的是，text-align-last不是所有瀏覽器支持。

所以對于不支持text-align-last的，可以在最后一行人工生成兩行文本，然后把第二行隱藏了，那么我們要現(xiàn)實的第一行自然就可以實現(xiàn)兩端對齊了。

而你的span是inline-block，也可以設置寬度（100%），那么這個時候內(nèi)聯(lián)匿名盒的寬度超過行盒，瀏覽器會將其拆成兩行，自然第一行文本的text-align效果就生效了。你的實現(xiàn)剛剛好是上面的第二個實現(xiàn)方法。

需要文字兩端對齊？文字兩端對齊是text-align:justify吧？