flex弹性布局的应用二之属性组合

最新推荐文章于 2024-03-01 15:52:05 发布

原创最新推荐文章于 2024-03-01 15:52:05 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

原创珍贵，转载请声明出处。

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍四种常用的Flex布局组合方式，通过调整display、flex-direction、justify-content和align-items属性，实现元素在容器中的不同排列与对齐效果。适用于网页设计中元素的灵活布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这四种属性的组合方式是经常用到的。

一、组合方式1

 display: flex;	//弹性布局，伸缩布局
 flex-direction: column;	//弹性盒元素的方向，列，即垂直方向
 justify-content: space-around;  //主轴（水平）方向的对齐方式
 align-items: center;	//侧轴（垂直）方向的对齐方式。

在这里插入图片描述
二、组合方式2

display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;

在这里插入图片描述
二、组合方式3

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

在这里插入图片描述
在content类加入每种上述方式中的四行代码，即可实现不同的效果
主要代码

<!DOCTYPE html>
<html>
<head>
	<title>flex布局的应用</title>
	<style type="text/css">
		.content{
			width: 800px;
			height: 400px;
			background-color:#dbdbdb;
		}
		.c-1{
			width: 115px;
			height: 50px;
			background-color:pink;
			border: 1px solid #f44336;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="c-1">1</div>
		<div class="c-1">2</div>
		<div class="c-1">3</div>
		<div class="c-1">4</div>
	</div>
</body>
</html>