flex 使得 行内元素 的margin-top 能能作用

flex 和 inline元素

起因: 在书写wx 小程序中，发现 text 模块的 margin-top 一直没起作用，而我跟着临摹打的效果图却表示 text 的margin-top 确实起作用了。这让我误以为 text标签是行内块元素(我也误认为span 也是 行内块元素了…),继而误以为是因为 flex 元素和 行内块元素排列导致的，然后测试一番，发现并非如此，margin-top依旧起作用了。 后面重新审查了一遍代码发现 container 被我打错了， .container 的类样式并没有起作用，修改完成后发现 text的 margin-top 起作用了。神奇！ 然后查询 margin 失效的原因，看到大多数都是因为元素为inline 元素所导致的， 这让我反过来思考, text 是否为行内( inline)元素，将 text标签替换为 view 标签，发现 margint-top 正常，再去查找资料，才知道 行内元素(inline) 是无法设置 margin-top和 margin-bottom的，可是一开始的效果表示了 text的 margin-top 确实是起作用了，会不会是 flex 导致 行内元素的margin-top 起作用了，用了简单的实例测试了一下，发现确实如此。

测试代码如下:

CSS样式

    <style type="text/css">
        /* .wrap{
            display: flex;
            flex-direction: column;
            backgr