HTML5 弹性布局

弹性布局

     弹性布局相关属性
     flex-direction相关属性
     flex-wrap相关属性
     justify-content相关属性
     align-items相关属性
     align-content相关属性
     样例Demo

弹性布局相关属性

属性说明
display值为flex时, 创建弹性布局容器
flex-direction伸缩流方向
flex-wrap伸缩流换行
flex-flow伸缩流(包括方向与换行),综合了flex direction和flex-wrap属性
justify-content主轴对齐
align-items侧轴对齐
align-content堆栈伸缩行,只有在flex-wrap:wrap和wrap-reverse 设置下且伸缩项目存在多行时才生效
flex用于设置或检索弹性模型对象的子元素如何分配空间,是flex-grow、flex-shrink和flex-basis属性的简写属性,即伸缩性。默认值是0 1. auto
order设置或检索弹性模型对象的子元素出现的顺序。默认值是0
flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量,即扩展比率
flex-shrink一个数字, 规定项目将相对于 其他灵活的项目进行收缩的量,即收缩比率。
flex-basis项目的长度。合法值“auto”"inherit"或一个后跟“%”‘ px”“ em"或任何其他长度单位的数字,即伸缩基准值



flex-direction相关属性

属性说明
row主轴为水平方向,排列顺序与页面的文档顺序相同
row-reverse主轴为水平方向,排列顺序与页面的文档顺序相反
column主轴为垂直方向,排列顺序为从上到下
column-reverse主轴为垂直方向,排列顺序为从下到上



flex-wrap相关属性

属性说明
nowrap (默认值)值为flex时, 创建弹性布局容器
wrap伸缩流方向
wrap-reverse伸缩流换行
column-reverse伸缩流(包括方向与换行),综合了flex direction和flex-wrap属性



justify-content相关属性

属性说明
flex-start默认值。项目位于容器的开头
flex- end项目位于容器的结尾
center项目位于容器的中心
space-between项目位于各行之间留有空白的容器内
space-around项目位于各行之前、之间、之后都留有空白的容器内



align-items相关属性

属性说明
stretch默认值。项目被拉伸以适应容器
center项目位于容器的中心
flex-start项目位于容器的开头
flex- end项目位于容器的结尾
baseline项目位于容器的基线上



align-content相关属性

属性说明
stretch默认值。项目被拉伸以适应容器
center项目位于容器的中心
flex-start项目位于容器的开头
flex-end项目位于容器的结尾
space-between项目位于各行之间留有空白的容器内space-around



样例Demo

效果图:

在这里插入图片描述
HTML5 实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>弹性布局</title>	
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 50px;
				height: 50px;
				border: 1px solid blueviolet;
				text-align: center;
				line-height: 50px;
			}
			
			.flex-item1{
				
				background: red;
				order: 3;/*设置伸缩向的排序*/
			}
			.flex-item2{
				
				background: green;
				order: 1;/*设置伸缩向的排序*/
			}
			.flex-item3{
				
				background: blue;
				order: 2;/*设置伸缩向的排序*/
			}
			
			.flex-container1{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				/*主轴对齐*/
				justify-content: flex-start;
			}
			
			.flex-container2{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				/*主轴对齐*/
				justify-content: flex-end;
			}
			.flex-container3{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
			}
			.flex-container4{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-around;
			}
			
			
			.flex-center1{
				/*伸缩向分配空间格式:flex:flex-grow;flex-fhrink;flex-grow*/
				/*表示除了占据原先的宽度外,还要分配剩余宽度(包括扩展或收缩)*/
				flex: 1 1 auto;
				
			}
			
			.flex-center2{
				/*表示分配所有宽度(包括扩展或收缩)*/
				flex-basis: 0%;
				flex-shrink: 1;
				flex-grow: 1;
			}
		</style>
		
	</head>
	<body>
		<h3>水平排列</h3>
		<h5>flex:1 1 auto</h5>
		<div class="flex-container1">
			<div class="flex-item1 box">1</div>
			<div class="flex-item2 box">1</div>
			<div class="flex-item3 box flex-center1">auto</div>
		</div>
		
		<h5>flex-basis: 0%;flex-shrink: 1;flex-grow: 1;</h5>
		<div class="flex-container1">
			<div class="flex-item1 box flex-center2">1</div>
			<div class="flex-item2 box flex-center2">1</div>
			<div class="flex-item3 box flex-center2">auto</div>
		</div>
		
		<h5>justify-content: flex-start;</h5>
		<div class="flex-container1">
			<div class="flex-item1 box">1</div>
			<div class="flex-item2 box">1</div>
			<div class="flex-item3 box">auto</div>
		</div>
		
		
		
		<h5>justify-content: flex-end;</h5>
		<div class="flex-container2">
			<div class="flex-item1 box">1</div>
			<div class="flex-item2 box">1</div>
			<div class="flex-item3 box">auto</div>
		</div>
		
		<h5>justify-content: space-around;;</h5>
		<div class="flex-container3">
			<div class="flex-item1 box">1</div>
			<div class="flex-item2 box">1</div>
			<div class="flex-item3 box">auto</div>
		</div>
	
		<h3>垂直排列</h3>
		<div class="flex-container4">
			<div class="flex-item1 box">1</div>
			<div class="flex-item2 box">1</div>
			<div class="flex-item3 box flex-center1">auto</div>
		</div>
			
	</body>	
</html>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页