首先需要给父盒子设置
display:flex；让其变成一个弹性布局，这里是模拟一行有三个div盒子，给最后一个盒子设置margin-left: auto，如下：
一排div，用flex布局让前面的盒子靠左显示，最后的盒子靠右显示
<template>
<div>
<!-- 父盒子 -->
<div class="father_box">
<!-- 第一个盒子 -->
<div>我是最左边的内容</div>
<!-- 第二个盒子 -->
<div>我是第二个盒子</div>
<!-- 第三个盒子 -->
<div class="right_box">我是最右边的盒子</div>
</div>
</div>
</template>
<style scoped>
.father_box {
background: cornflowerblue;
color: #fff;
display: flex;
}
.right_box {
margin-left: auto;
}
</style>
效果如下：
同理，如果想让第一个盒子向左显示，其余盒子都向右显示，只需要给左边的第一个盒子设置
margin-right:auto即可。
实现两个元素一个居左一个居中
<template>
<div>
<div class="maxBox">
<div class="leftBox">左边</div>
<div class="centerBox">中间</div>
<!-- 重点在第三个是一个空盒子且名字要跟第一个盒子的名字一致 -->
<div class="leftBox"></div>
</div>
</div>
</template>
<style scoped>
/* 最大的盒子 */
.maxBox {
display: flex;
background-color: cornflowerblue;
color: white;
}
/* 第一个盒子 */
.leftBox {
flex: 1;
}
/* 第二个盒子 */
.centerBox {
text-align: center;
}
</style>
效果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/79456.html
