05-justify-content

七色的天空

已于 2023-12-16 22:13:32 修改

阅读量349

点赞数 4

分类专栏： 07_移动端文章标签：移动端

于 2023-11-30 02:50:22 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/134702624

版权

07_移动端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>justify-content</title>
	<style type="text/css">
		/*
		justify-content:  用于设置或检索弹性盒子元素在主轴方向上的对齐方式;
			center:  设置项目内容位于容器的中心;
			flex-start:  默认值, 项目位于容器的开头;
			flex-end: 项目位于容器的结尾;
			space-between: 项目位于各行之间留有空白的容器内;
			space-around: 项目位于各行之前 之间 之后都留有空白的容器内;
		*/
		.flex-container {
			width: 1200px;
			height: 800px;
			background-color: skyblue;
			display: flex;
			flex-direction: row;
			justify-content: center;
			/*justify-content: flex-start;*/
			/*justify-content: flex-end;*/
			/*justify-content: space-evenly;*/
			/*justify-content: stretch;*/
		}
		.flex-item {
			/*width: 200px;*/
			height: 100px;
			/*margin: 10px;*/
			background-color: orange;
		}
		.flex-item:nth-child(2) {
			width: 100px;
			/*height: 300px;*/
			background-color: blue;
		}
		.flex-item:nth-child(3) {
			/*width: 400px;*/
			/*height: 30px;*/
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="flex-container">
		<div class="flex-item">1</div>
		<div class="flex-item">2</div>
		<div class="flex-item">3</div>
	</div>
</body>
</html>

上述运行结果：

space-evenly和space-around的区别

space-evenly：该值会在弹性容器内均匀地分布弹性项目，并且会确保首尾项目与容器边缘之间也有相等的空间。换句话说，所有项目之间的空间和项目与容器边缘之间的空间都是相等的。这意味着每个弹性项目之间的间距相等，并且首尾项目与容器边缘之间也具有相等的间距。

space-around：该值会在弹性容器内分布弹性项目，并在相邻项目之间以及首尾项目与容器边缘之间创建均等的空间。这也意味着每个弹性项目之间的间距是相等的，但首尾项目与容器边缘之间的间距将会是其他间距的一半。换句话说，相邻项目之间的空间比项目与容器边缘之间的空间大一倍。