flex布局 三个div 两个左对齐 一个右对齐
2023-05-25 本文已影响0人
泪滴在琴上
一、问题
有一个盒子flex布局，子元素有 三个div，在不改变dom结构的情况下，实现 前两个左对齐 第三个右对齐。
二、实现方案
在flex布局中如果某个元素的margin为auto，那么它的margin将会自动填充为 剩下的空间。
三、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: flex-start;
}
.block {
width: 100px;
height: 100px;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box">
<div class="block">块1</div>
<div class="block">块2</div>
// 此地margin-left:auto；自动填充了剩余空间
<div class="block" style="margin-left: auto;">块3</div>
<div class="block">块4</div>
</div>
</body>
</html>
image.png
参考链接：https://blog.csdn.net/KangTongShun/article/details/109055197
