CSS容器属性总结

最新推荐文章于 2024-04-19 05:56:51 发布

todayags

最新推荐文章于 2024-04-19 05:56:51 发布

阅读量684

点赞数 1

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

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

版权

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

最低0.47元/天解锁文章

todayags

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS容器属性总结

1）flex-direction：设置主轴方向row：默认值，主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。<!DOCTYPE html><html><head> <title>css + div容器:flex-direction</title> <style type="text/css
复制链接

扫一扫