Css3弹性盒模型详解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>css</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="">
<style>
.box{
	height: 100px;
	border: 10px solid #000;
	padding: 10px;
	display: -webkit-box;/*横向排列 默认*/
	/* -webkit-box-orient:vertical; *//*垂直显示*/
	/* -webkit-box-direction:Reverse; *//*.box里的内容倒序*/
	font-size: 20px;
	color: #fff;
	-webkit-box-pack:center;
	-webkit-box-align:center;
}
.box div{
	width: 100px;
	height: 100px;
	background: red;
	border: 1px solid #000;
}
.box div:nth-of-type(1){
	/* -webkit-box-ordinal-group:2; *//*自定义排列顺序*/
	-webkit-box-flex:1;/*1/15*/
}
.box div:nth-of-type(2){
	/* -webkit-box-ordinal-group:5; */
	-webkit-box-flex:2;/*2/15*/
}
.box div:nth-of-type(3){
	/* -webkit-box-ordinal-group:4; */
	-webkit-box-flex:3;/*3/15*/
}
.box div:nth-of-type(4){
	/* -webkit-box-ordinal-group:1; */
	-webkit-box-flex:4;/*4/15*/
}
.box div:nth-of-type(5){
	/*-webkit-box-ordinal-group:3;*/
	-webkit-box-flex:5;/*5/15*/
/*子元素的尺寸 = 盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和(这里为15)
可以理解为：
	子元素的尺寸 = {当前元素所处父级盒子/所有子元素的box-flex属性值的和(这里为15)}*当前子元素的box-flex属性值
	第一个子div的尺寸 = .box的尺寸*1/1+2+3+4+5  15
*/
/*
对于多出来的水平空间管理(写在父级)：
-webkit-box-pack:start;父级下的子内容靠左 = float:left;默认
-webkit-box-pack:end;父级下的子内容靠右 = float:right;
-webkit-box-pack:center;父级下的子内容水平居中;
-webkit-box-pack:Justify;父级下的子内容平均分多余的空隙 加了间距（相当于给图片加了margin的效果）;

对于多出来的垂直空间管理(写在父级)：
-webkit-box-align:start; 父级下的子内容垂直顶部
-webkit-box-align:center; 父级下的子内容垂直居中
-webkit-box-align:end; 父级下的子内容垂直底部
如果要使内容水平垂直居中：
-webkit-box-pack:center;
-webkit-box-align:center;就这两个一起。
*/
}
/*要把下面所有的div一排显示两个方法：
.box{
	width: 800px;
	height: 500px;
	border:10px solid pink;
	display: flex;
	flex-direction:row;
	justify-content:flex-end;
	flex-wrap:wrap; 换行
}
.box .item{
	width: 80px;
	height: 80px;
	background: red; 
	border:1px solid #000;
	/*box-sizing:border-box;
	float:left;
}
	以下都为父级的设置:
	1.div 加float:left; 但是如果他有边框的话(超过父级宽度)就会被挤下去
	所以要给他加 这两句代码 float:left; box-sizing:border-box;就在一排显示了，但是他超过父级宽度还是会挤下去。
	2.弹性布局 给父级加 display:flex; 无论排多少个div都只
	在一排显示
	当子元素总数超过父级宽度 子元素大小自适应 还可以为下面的div加margin值
	flex-direction:row(默认值 从左向右排);父级加
	row-reverse 从右向左排
	column 从上往下排
	column-reverse 从下往上排

	justify-content：主轴对齐（主要为X轴方向上的排列）
	flex-start (默认)= float:left;靠左
	flex-end =float:right;靠右
	中间子元素怎么分布:
	center 元素居中 平分左右两侧富裕空间
	space-between 紧贴两侧、中间富裕空间平均分
	space-around 两侧有空隙、中间富裕空间平均分

	align-items:主要为Y轴方向上的排列
	align-items:flex-start;（顶部）
	align-items:center;（居中）
	align-items:flex-end;（底部）

	flex-wrap 换行 nowrap 默认 wrap-reverse 倒排
	flex-wrap:wrap;

	align-content 堆栈伸缩行
	align-content 会更改 flex-wrap的行为
	flex-start (默认)= float:left;左
	flex-end =float:right;右
	center 元素居中 平分左右两侧富裕空间
	space-between 紧贴两侧、中间富裕空间平均分
	space-around 两侧有空隙、中间富裕空间平均分

	设置里面的子元素垂直居中显示：(给父级加)
	display:flex;
	justify-content:center;
	align-items:center;
	或者:
	display:flex;(父级)
	margin:auto;(子元素)

	以下为子元素设置:
	子元素排列顺序:
	.box .item:nth-of-type(1){
	order:7;} 数字越大越靠后 支持负数

	flex 伸缩性
	flex:auto;占几份
	flex:none;

	align-self 控制单独子元素对齐方式
	flex-start 左	
	flex-end 右
	center 居中
*/
</style>
</head>
<body>
  <div class="box">
  	<div>1</div>
  	<div>2</div>
  	<div>3</div>
  	<div>4</div>
  	<div>5</div>
  </div>
</body>
</html>
Css3弹性盒模型详解

猜你喜欢
