flex布局下实现问题两端对齐

Question

<div style="width:200px;height:20px;border:1px solid red;display: flex;">

Canvas绘制弧线入门示例

</div>

代码如上,试过 space-between 好像只对容器生效, 求大佬支招,最好是不改动源码的情况下.有什么变通方法吗,

Answer 1

可以用text-align: justify 但是justify也会存在问题，详见链接描述

搬运：

因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行，所以也是最后一行了，所以text-align设置为justify不会产生任何效果。
解决方法是使用text-align-last，并将其设置为justify。
不过不幸的是，text-align-last不是所有浏览器支持。

所以对于不支持text-align-last的，可以在最后一行人工生成两行文本，然后把第二行隐藏了，那么我们要现实的第一行自然就可以实现两端对齐了。

而你的span是inline-block，也可以设置宽度（100%），那么这个时候内联匿名盒的宽度超过行盒，浏览器会将其拆成两行，自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。

Answer 2

需要文字两端对齐？文字两端对齐是text-align:justify吧？

Answer 3

<div style="width:200px;height:20px;border:1px solid red;display: flex;justify-content:space-between"><span>Canvas绘制弧线</span><span>入门示例</span></div>
要实现这种效果？