Html 为什么display:flex会导致div不换行

请参阅我的代码笔：

为什么测试在SVG图像的右侧？事实上它应该断线，不是吗

我想在一个div内垂直居中。我的方法有什么问题

<div>
    <div style="display: flex; justify-content: center; align-items: center;">
        <div>
            <img src="http://www.w3.org/TR/SVG/images/linking/link01.svg" alt="svgme" />
        </div>
        <div class="commandName">test</div>
    </div>
</div>

测验

这就是flex发明的目的，但是您可以使用

flex方向：column

将项目安排在一行的列istead中。非常感谢您的帮助。似乎我真的深入研究了flexbox布局，做了一个我们只支持IE9的应用程序