前端css的flex布局

需求：实现多个元素一行内显示，且处在不同的位置

先上最终的结果图：

代码如下：

<div>
    <p>最新执行记录</p>
    <bk-button></bk-button>
</div>

给外层的div添加属性display: flex;和align-items: center;内容弹性布局，且居中显示，

效果

这里需要第二个元素向右浮动，则给bk-button这个元素添加属性margin-left:auto;

效果

最终代码：

<div style="font-size: 14px; padding-bottom: 20px; display: flex; align-items: center;">
     <p>最新执行记录</p>
    <bk-button
        style="margin-left: auto;"
        :theme="'primary'"
        title="refesh"
        icon="bk-icon icon-refresh"
        @click="refeshClick"
        class="mr10"></bk-button>
</div>

这里顺便说一下display为flex和inline-flex的区别

display: flex 将对象作为弹性伸缩盒显示

display: inline-flex 将对象作为内联块级弹性伸缩盒显示

flex效果如下

虽然没有为父元素设置宽度，但父元素的宽度为100%，而高度则是由子元素撑开，既高度自适应

inline-flex效果如下

没有为父元素设置宽度, 父元素的宽度会根据子元素而自适应，高度也是由子元素撑开，自适应