CSS容器属性总结

最新推荐文章于 2024-04-16 17:45:13 发布

todayags

最新推荐文章于 2024-04-16 17:45:13 发布

阅读量760

点赞数 1

分类专栏： css 文章标签：容器前端 html

本文链接：https://blog.csdn.net/todayags/article/details/123279000

版权

本文总结了CSS中关于容器布局的重要属性，包括flex-direction、justify-content、flex-wrap、align-content、align-items、flex-flow、order、flex-grow、flex-basis和align-self。详细解释了这些属性如何控制元素在主轴和侧轴上的排列方式、换行行为以及空间分配，帮助理解CSS容器布局的灵活性和多样性。

摘要由CSDN通过智能技术生成

1）flex-direction：设置主轴方向
row：默认值，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

<!DOCTYPE html>
<html>
<head>
	<title>css + div容器:flex-direction</title>
	<style type="text/css">
	html,body,div{
		margin: 0px;
		padding: 0px;
	}
		.box{
			display:flex;
			flex-direction: row;   
			border: solid 1px #000;
			width: 200px;
			height: 200px;
		}
		.demo1{
			border: solid 1px black;
			width: 40px;
			height: 40px;
			margin-bottom:4px;
		}
	</style>
</head>
<body>
	<h5>1）flex-direction：设置主轴方向
row：默认值，主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。</h3>
<div class="box">
	<div class="demo1">A</div>
	<div class="demo1">B</div>
	<div class="demo1">C</div>
	<div class="demo1">D</div>
</div>
</body>
</html>

2）justify-content：设置主轴上的子元素排列方式
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly：均匀排列每个元素，每个元素之间的间隔相等

<!DOCTYPE html>
<html>
<head>
	<title>css + div容器:justify-content</title>
	<style type="text/css">
	html,body,div{
		margin: 0px;
		padding: 0px;
	}
		.box{
			display:flex;
			justify-content:space-between;   
			border: solid 1px #000;
			width: 200px;
			height: 200px;
		}
		.demo1{
			border: solid 1px black;
			width: 40px;
			height: 40px;
			margin-bottom:4px;
		}
	</style>
</head>
<body>
	<h5>justify-content：设置主轴上的子元素排列方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
spa