Online notes favinavi - online bookmark

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

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

Demo

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

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

简单记录一下备用。

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

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

2302

favinavi - for heavy web user Online notes

你的网站会有不请自来的访客吗？
做网站，做SEO，就是希望别人来访问，最欢迎的当然是真实用户，其次是各大搜索引擎的蜘蛛。但是，假如你是个站长，你真的了解都有谁来造访你的网站吗？有不请自来的吗？...
几种CSS字体描边和阴影效果
基本方法： 1、-weblit-text-strok：字体描边，非标准方法，浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身，属于在字体内部描出边界，所以...
统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法
一般而言，各大搜索引擎都允许提交网站地图，例如网站根目录下的“sitemap.xml”文件，是xml格式的文本文件。当提交了网站地图后，搜索引擎蜘蛛来访时，可能...
了解onenav
https://blog.xiaoz.org/archives/16772
favinavi人性化网络收藏夹与pinbox跨平台收藏工具的简单对比
简体中文世界里的网络收藏夹类网站，我个人观点：pinbox是做得非常用心的一个，看得出来背后有一个专业团队在开发和运营，人数多少不知道，但肯定是比favinav...
把favinavi网络收藏夹的书签搜索功能做到最好
在此先感谢“changanluan”用户的建议，是他（她）提出了这个问题，favinavi怎么还没有书签搜索功能呢？是啊，我不属于那种要收藏几千个书签的收藏...