default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

CSS学习笔记:flex布局做出元素两端对齐效果

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-05-28 06:45(UTC)

Demo

很久以前,还没有flex布局方法的时候,想要在同一行内的两个元素分两端左右对齐,应该使用float方法,左边的元素使用float:left; 右边的元素使用float:right;。

现在,flex布局大行其道,要想达到同样的目的,理论上使用flex的方法效果应该更好。

简单记录一下备用。

CSScontent_copyCopy codes
p{
	text-align: center;
	font-size: 32px;
	margin-bottom: 4px;
}
.boxWrap{
	width: 70%;
	margin: 0 auto;
	padding: 16px;
	overflow: hidden;
	background: #fcc;
}
.box1,.box2{
	width: 180px;
	height: 100px;
	background: #333;
	color: #fff;
	padding: 8px;
}

#float .box1{
	float: left;
}
#float .box2{
	float: right;
}

#flex{
	display: flex;
}
#flex .box2{
	margin-left: auto;
	justify-content: flex-end;
	width: 240px;
}
htmlcontent_copyCopy codes
<p>使用float方法</p>
<div class='boxWrap' id='float'>
	<div class='box1'>box1<br/>float:left</div>
	<div class='box2'>box2<br/>float:right</div>
</div>

<p>使用flex布局</p>
<div class='boxWrap' id='flex'>
	<div class='box1'>box1</div>
	<div class='box2'>
		box2<br/>
		margin-left: auto;<br/>
		justify-content: flex-end;
	</div>
</div>

visibility 1974


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel