在线笔记 favinavi - 人性化网络收藏夹

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

分类标签：全部 CSS html javascript php/other IT

by: fanshome 2023-05-28 06:45(UTC)

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

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

简单记录一下备用。

CSS复制代码

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;
}

html复制代码

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

2303

favinavi - 重度网络用户必备在线笔记

An example of increasing productivity with the Favinavi web favorites sharing feature
Favinavi’s humanized network favorites provides a sharing function, that is, u...
为什么会做favinavi网络收藏夹网站？记录一下心路历程
记得最早是在2007年，那时工作需要，经常用浏览器上网查资料、访问工作网站等等。经常遇到一个问题，就是白天工作时看到一个网站的某篇文章很有用，在浏览器设为了书签...
你的网站会有不请自来的访客吗？
做网站，做SEO，就是希望别人来访问，最欢迎的当然是真实用户，其次是各大搜索引擎的蜘蛛。但是，假如你是个站长，你真的了解都有谁来造访你的网站吗？有不请自来的吗？...
favinavi为什么会选择微软的bing搜索作为默认的搜索引擎？
这个选择初看有点奇怪，因为论搜索，谷歌是当然的第一选择，而中文搜索，百度又是当仁不让的中文搜索老大，微软的bing虽然做得还不错，但无论从哪方面说，它似乎都不该...
搭建家庭用服务器全套攻略，300元一台小主机全部搞定
有些人闲不住，喜欢折腾，业余时间想自己搭个网站，或者更简单点，想自己折腾个软路由、NAS什么的，那么，这篇文章可能对你有所帮助。一、硬件选型：一般而言，...
更全面匹配UTF-8中文汉字的正则表达式
网上搜索得到的匹配汉字的正则表达式有一部分并不全面，只匹配了Unicode字符集中\u4E00-\u9FA5范围，并不包含\uF900-\uFA2D这些后期添加...