flex布局 三个div 两个左对齐 一个右对齐

2024年5月6日 98次阅读 来源: KangTongShun

一、问题
有一个盒子flex布局，子元素有 三个div，在不改变dom结构的情况下，实现 前两个左对齐 第三个右对齐。
二、实现方案
在flex布局中如果某个元素的margin为auto，那么它的margin将会自动填充为 剩下的空间。

    <div class="box">
        <div class="block">
        </div>
        <div class="block">
        </div>
        <div class="block" style="margin-left: auto;">
        </div>
    </div>
	<style> .box {  display: flex; justify-content: flex-start; } .block {  width: 100px; height: 100px; background-color: black; } </style>
    原文作者：KangTongShun
    原文地址: https://blog.csdn.net/KangTongShun/article/details/109055197
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞