在线笔记 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>

1109

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

win11安装跳过TPM2.0和安全启动检查的方法
为了在一些相对老旧的机器上安装windows 11，我们需要跳过win11安装程序中的TPM2.0检查，方法如下：进入安装界面后，按Shift+F10打开命...
Applebot是什么？
Applebot是由苹果公司开发的网络爬虫（Web Crawler），用于收集和索引互联网上的网页内容。它是苹果公司搜索引擎Apple Search的一部分，...
使用favinavi网络收藏夹分享功能提高工作效率一例
favinavi人性化网络收藏夹提供了分享功能，就是用户可以将自己收藏、整理后的书签分享给自己的同学、同事或朋友等。在某地政府部门工作的一位领导（这里为了方...
使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题
当使用基于Cookie-Free域名加载CSS时，字体文件无法加载的问题通常是因为浏览器政策所导致的。这个问题与字体文件资源和浏览器的同源策略有关。在Web...
How long a new website can occupy the first position of search engine
Whether a new website can rank first on the main keywords depends on many factor...
几种CSS字体描边和阴影效果
基本方法： 1、-weblit-text-strok：字体描边，非标准方法，浏览器兼容性存在一些问题。好处是这种方法不扩展字体本身，属于在字体内部描出边界，所以...