很好用的flex布局汇总

最新推荐文章于 2022-04-02 21:44:15 发布

chixuanli0216

最新推荐文章于 2022-04-02 21:44:15 发布

阅读量98

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/u/3883702/blog/1862188

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.menu{
				display: flex;
				
				/*-------------------水平方向-----------------------------*/
				
				justify-content: center;					
				/*居中*/
				justify-content: space-between;				
				/*两端对齐，项目之间的间隔都相等。*/
				justify-content: space-around;				
				/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
				justify-content: flex-start;				
				/*左对齐*/
				justify-content: flex-end;					
				/*右对齐*/
				
				/*-------------------垂直方向-----------------------------*/
				align-items: center;					
				/*垂直在中间前端居中*/
				align-items: flex-start;					
				/*交叉轴的起点对齐。*/
				align-items: flex-end;						
				/*交叉轴的终点对齐。*/
				align-items: baseline;						
				/*项目的第一行文字的基线对齐。*/
				align-items: stretch;						
				/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/
							
				/*1.flex-diirection属性*/
				flex-direction: column;					
				/*主轴为垂直方向，起点在上沿。*/
				flex-direction: column-reverse;			
				/*主轴为垂直方向，起点在下沿。*/
				flex-direction: row-reverse;			
				/*主轴为水平方向，起点在右端。*/
				flex-direction: row; 					
				/*主轴为水平方向，起点在左端。*/
				/*2.flex-wrap属性*/	
				flex-wrap: nowrap;							
				/*默认，不换行*/
				flex-wrap: wrap;							
				/*换行，第一行在上方。*/
				flex-wrap: wrap-reverse;					
				/*换行，第一行在下方。*/					
				width: 900px;
				height: 500px;
				background-color: #FFFFFF;
			}
			.item{
				width: 100px;
				height: 100px;
				/*background-color: red;*/
			}
			.item1{
				background-color:bisque;
			}
			.item2{
				background-color: red;
			}
			.item3{
				background-color: yellow;
			}
			.item4{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div class="menu">
			<div class="item item1"></div>
			<div class="item item2"></div>
			<div class="item item3"></div>
			<div class="item item4"></div>
		</div>
	</body>
</html>

特别注意：要在父类里面写，子类至少有两个

转载于:https://my.oschina.net/u/3883702/blog/1862188