14弹性盒子

14弹性盒子

一、弹性盒子介绍

是一种新的布局模式，让元素有能力控制元素的排列方式，常用于移动端的布局

display:flex;

将元素设置为弹性盒子，该元素变为一个行内块元素

设置了弹性盒子的子元素的

float:left;
float:right;

clear:left;
clear:right;
clear:both;

vertical-align:top;
vertical-align:middle;
vertical-align:bottom;

属性及属性值将会失效

二、容器上的属性

容器

被设置为弹性盒子的盒子就是一个容器，即设置了

display:flex;

的盒子称为容器

主轴

容器内的内容的排列方式。默认为横向排列，一行多列

设置主轴的方向
flex-decoration:;
	row				横向排列，默认排列方式
	column			纵向排列
	cow-reverse		横向反向排列
	column-reverse	纵向反向排列
反向排列方式几乎不用

设置主轴是否换行
flex-wrap:;
	nowrap	不换行，默认值
	wrap	换行

侧轴

与主轴垂直的方向称为侧轴，侧轴的方向不能设置，可以通过设置主轴的方向改变侧轴的方向

项目

容器内的子级元素就称为项目，容器内的子级元素的子级元素就不能称为项目

设置项目在主轴上的排列方式 (容器属性)

justify-content:;
	sapce-between	间隔在项目之间，贴近容器
	space-around	间隔在项目周围，与容器有间隔
	space-evenly	等分项目之间的间隔，与容器有间隔
	center			项目居中
	flex-end		项目在主轴终点对齐，项目在水平方向的终点在最右侧，垂直方向的终点在最底部
	flex-start		项目在主轴起点对齐，项目在水平方向的起点在最左侧，垂直方向的起点在最顶部

设置项目在侧轴上的排列方式 (容器属性)

align-items:;
	flex-start	项目在侧轴起点对齐
	flex-end	项目在侧轴终点对齐
	center		项目居中对齐
	baseline	项目基线对齐
	stretch		项目拉伸铺满整个容器，默认值

设置多根侧轴的排列方式 - 单根侧轴无效 (容器属性)

align-content:;
	sapce-between	间隔在项目之间，贴近容器
	space-around	间隔在项目周围，与容器有间隔
	space-evenly	等分项目之间的间隔，与容器有间隔
	center			项目居中
	flex-end		项目在侧轴终点对齐
	flex-start		项目在侧轴起点对齐
	stretch			项目拉伸铺满整个容器，默认值

三、项目身上的属性

放大项目

flex-grow:;
	属性值是数字，没有单位，默认值为0不放大，按照属性分到对应份数的空间

缩小项目

flew-shrink:;
	属性值是数字，没有单位，默认值为1缩小，按照属性缩小对应份数的空间

复合属性

flex:0 1 auto;
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;

设置项目单独的排列方式

align-self:;stretch
	flex-start	该项目在侧轴起点对齐
	flex-end	该项目在侧轴终点对齐
	base-line	该项目在基线对齐
	stretch		该项目在侧轴拉伸

四、利用弹性盒子的属性制作骰子的六面

布局

<div>
	<div class="box1">
		<div class="wrap"></div>
	</div>
	<div class="box2">
		<div class="wrap"></div>
		<div class="wrap"></div>
	</div>
	<div class="box3">
		<div class="wrap"></div>
		<div class="wrap"></div>
		<div class="wrap"></div>
	</div>
	<div class="box4">
		<div>
 			<div class="wrap"></div>
            <div class="wrap"></div>
        </div>
		<div>
			<div class="wrap"></div>
			<div class="wrap"></div>
		</div>
	</div>
	<div class="box5">
		<div>
			<div class="wrap"></div>
			<div class="wrap"></div>
		</div>
		<div>
			<div class="wrap"></div>
		</div>
		<div>
			<div class="wrap"></div>
			<div class="wrap"></div>
		</div>
	</div>
	<div class="box6">
		<div>
			<div class="wrap"></div>
			<div class="wrap"></div>
			<div class="wrap"></div>
		</div>
		<div>
			<div class="wrap"></div>
			<div class="wrap"></div>
			<div class="wrap"></div>
		</div>
	</div>
</div>

样式

* {
	padding: 0;
	margin: 0;
}

body {
	display: flex;
}

body>div {
	width: 750px;
	height: 120px;
	background: #000;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 100px auto;
}

body>div>div {
	width: 70px;
	height: 70px;
	padding: 10px;
	border-radius: 10px;
	display: flex;
	background: white;
	box-shadow: 5px 5px 5px grey inset;
}

body div .wrap {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #000;
	box-shadow: 5px 5px 5px grey inset;
}

.box1 {
	justify-content: center;
	align-items: center;
}

.box2 {
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.box3 {
	justify-content: space-between;
}

.box3 div:nth-child(2) {
	align-self: center;
}

.box3 div:nth-child(3) {
	align-self: flex-end;
}

.box4 {
	justify-content: space-between;
}

.box4>div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.box5 {
	justify-content: space-between;
}

.box5>div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.box5>div:nth-child(2) {
	justify-content: center;
}

.box6 {
	justify-content: space-between;
}

.box6>div {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}