CSS伸缩盒模型

伸缩盒模型是CSS中的一种布局手段，可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。

1. 伸缩容器

给元素设置display:flex 或 display:inline-flex ，就是伸缩容器。

2. 主轴与侧轴

主轴：伸缩项目沿着主轴排列，主轴默认是水平的，默认方向是：从左到右。
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，默认方向是：从上到下。

主轴的属性：

属性名	作用
flex-direction 主轴方向	row ：主轴方向水平从左到右（默认） row-reverse ：主轴方向水平从右到左 column ：主轴方向垂直从上到下 column-reverse ：主轴方向垂直从下到上
flex-wrap 主轴换行	nowrap ：不换行（默认） wrap ：自动换行 wrap-reverse ：反向换行
flex-flow 复合属性	flex-direction 和 flex-wrap
justify-content 主轴对齐	flex-start ：主轴起点对齐（默认） flex-end ：主轴终点对齐 center ：居中对齐 space-between ：均匀分布，两端对齐（最常用） space-around ：均匀分布，两端距离是中间距离的一半 space-evenly ：完全平分

注意：改变了主轴的方向，侧轴方向也随之改变。

侧轴的属性：

属性名	作用
align-items 侧轴一行对齐	flex-start ：顶端对齐 flex-end ：尾端对齐 center ：水平对齐 baseline : 伸缩项目的第一行文字的基线对齐 stretch ：如果伸缩项目未设置高度，将占满整个容器的高度（默认）
align-content 侧轴多行对齐	flex-start ：顶端对齐 flex-end ：尾端对齐 center ：与侧轴的中点对齐 space-between ：两端对齐，中间平均分布 space-around ：均匀分布，上下两端距离是中间距离的一半 space-evenly : 完全平分 stretch ：占满整个侧轴（默认）

3. flex练习1

用flex完成以下排列：

3.1 代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex练习1</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        .wrapper{
            width: 400px;
            height: 200px;
            margin: auto;
            border: 1px solid #ccc;
            display: flex;
            /* align-items指定元素在纵轴上的排布方式 */
            align-items: center;
            /* justify-content指定元素在主轴上的排布方式 */
            justify-content: space-around;
        }

        .box{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

4. flex练习2

用flex，完成骰子的点数。

4.1 分析思路

4.2 代码演示

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>骰子点数</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			.wrapper {
				margin: 100px 100px;
				width: 500px;
				height: 500px;
				border-radius: 10px;
				background-color: #232323;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-around;
			}

			.dot {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: #000;
			}

			.box-common {
				width: 100px;
				height: 100px;
				display: flex;
				background-color: #fff;
				padding: 4px;
				margin: 60px;
				border-radius: 8px;
			}

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

			.box2 {
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
			}
			/* align-self子元素属性,控制自身的排列 */
			.dot2-1 {
				align-self: flex-start;
			}
			/* align-self子元素属性,控制自身的排列 */
			.dot2-2 {
				align-self: flex-end;
			}

			/* 3点的写法 */
			.box3 {
				justify-content: space-between;
			}
			.dot3-1 {
				align-self: flex-start;
			}
			.dot3-2 {
				align-self: center;
			}
			.dot3-3 {
				align-self: flex-end;
			}
			/* box4 */
			.box4 {
				flex-wrap: wrap;
			}
			.dot4 {
				width: 50%;
				height: 50%;
				display: flex;
			}
			.dot4:nth-child(2) {
				justify-content: flex-end;
			}
			.dot4:nth-child(3) {
				align-items: flex-end;
			}
			.dot4:nth-child(4) {
				justify-content: flex-end;
				align-items: flex-end;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<!-- 一点 父容器，主轴居中，侧轴居中-->
			<div class="box box-common">
				<div class="dot"></div>
			</div>
			<!-- 二点 主容器主轴为侧轴，居中，每一个子项单独控制，第一个flex-start，第二个flex-end-->
			<div class="box2 box-common">
				<div class="dot dot2-1"></div>
				<div class="dot dot2-2"></div>
			</div>
			<!-- 三点 同2点写法一样，只不过中间的点是center-->
			<div class="box3 box-common">
				<div class="dot dot3-1"></div>
				<div class="dot dot3-2"></div>
				<div class="dot dot3-3"></div>
			</div>
			<!-- 四点 分为四个部分，嵌套两层flex盒子-->
			<div class="box4 box-common">
				<div class="dot4">
					<div class="dot"></div>
				</div>
				<div class="dot4">
					<div class="dot"></div>
				</div>
				<div class="dot4">
					<div class="dot"></div>
				</div>
				<div class="dot4">
					<div class="dot"></div>
				</div>
			</div>
		</div>
	</body>
</html>