其他分享
首页 > 其他分享> > flex布局justify-content发现

flex布局justify-content发现

作者:互联网

利用justify-content: space-between;可以让两个盒子左边一个右边一个

很方便,但是第一个盒子设置隐藏的时候,第二个盒子就会跑到第一个盒子的位置,占据了第一个盒子的位置,页面布局就乱了。

margin在flex布局中,子元素margin为auto的时候,伸缩包含块剩余的空间将会分配到flex-item的外边距margin上(百度0.0)

这时候就可以给第二个盒子设置一个margin-left:auto;第二个盒子就可以回到右边。

且当有三个的盒子的时候

这种方法可以完美的实现

两个盒子在左边一个盒子在右边

或是两个盒子在右边一个盒子在左边

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            display: flex;
            justify-content: space-between;
        }
    	.box div{    
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: pink;
        }
        .box2{
            background-color: blue;
            margin-left: auto;
        }
        /*.box .box1{
            display: none;*/
        .box3{
            background-color: red;
        }
    </style>
</head>
<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
        <div class="box3"></div>
	</div>
</body>
</html>

 

标签:box,flex,盒子,color,content,margin,justify
来源: https://blog.csdn.net/sssssboer/article/details/121587300