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

最新推荐文章于 2023-12-07 19:26:01 发布

自在飞花轻似梦paofu

最新推荐文章于 2023-12-07 19:26:01 发布

阅读量409

点赞数

分类专栏： CSS 文章标签： css

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

本文链接：https://blog.csdn.net/weixin_42277214/article/details/92002686

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下四种属性由不同的属性值进行组合，会产生不同的变化，很是奇妙，学会如何运用会有很大帮助。我写的是我经常用的几种组合方式，供大家借鉴。

一、四种属性组合使用1
在 content类 中加入此代码可实现如图所示布局

display: flex;	//弹性布局
flex-direction: row;	//弹性盒元素的方向
justify-content: center; //主轴（水平）方向的对齐。对齐方式
align-items: center;	//侧轴（垂直）方向的对齐。center属性值是中心对齐。用的多的就是center。

在这里插入图片描述
二、四种属性组合使用2
在 content类 中加入此代码可实现如图所示布局

display: flex;
flex-direction: row;
justify-content: space-between;	//两端对齐
align-items: center;

在这里插入图片描述
三、四种属性组合使用3
在 content类 中加入此代码可实现如图所示布局

display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;

在这里插入图片描述

flex-direction的属性值参考：https://www.runoob.com/cssref/css3-pr-flex-direction.html
justify-content的属性值参考：https://www.runoob.com/cssref/css3-pr-justify-content.html

主要代码

<html>
<head>
	<title>flex布局的应用</title>
	<style type="text/css">
		.content{
			width: 800px;
			height: 400px;
			background-color:#dbdbdb;

		}
		.c-1{
			width: 115px;
			height: 180px;
			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>