首页 > 其他分享> 文章详细

flex布局justify-content发现

2021-11-28 09:30:19 阅读：168 来源： 互联网

标签：box flex 盒子 color content margin justify

利用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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

flex布局justify-content发现