一、flex四大概念
1）容器 如果给一个div设置了 display:flex; 那么这个div就是一个容器。
2）项目 容器中的直接子元素叫项目。
3）主轴 默认情况下，项目是在主轴上进行排列的，从主轴的开始位置开始。
4）交叉轴 和主轴垂直的那个轴就是交叉轴。
flex在移动端进行布局，非常方便。
二、12个属性
学习flex就是学习12个属性，有6个是对于容器的设置，有6个是对于项目的设置。
1、容器相关的6大属性：
1）flex-direaction： 设置主轴的方向
2）flex-wrap： 如果项目足够多时，是否换行
3）flex-flow： 是上面两个属性的简写
4）justify-content： 处理主轴上的富空间
5）align-items： 设置项目在交叉轴上的位置
6）align-content： 如果有多根主轴，多根主轴的摆放位置
2、项目相关的6大属性：
1）order： 设置项目在主轴上的排列顺序
2）flex-grow： 如果有富余空间，设置项目生长的因子
<style>
*{ margin: 0; padding: 0; }
.box{ width: 400px;height: 400px;border: 1px solid red; display: flex;}
.item{ width: 100px;height: 100px; flex: 1;}
/* 需要把富余空间分成三份，一人占一份 */
/* .item1{ flex-grow: 1; }
.item2{ flex-grow: 1; }
.item3{ flex-grow: 1; } */
/* .item1{ flex: 1; }
.item2{ flex: 1; }
.item3{ flex: 1; } */
</style>
3）flex-shrink： 如果项目在主轴上装不下，设置项目的缩小因子 （基本上不用）
4）flex-basis： 设置项目在主轴的占据大小
<style>
*{ margin: 0; padding: 0; }
.box{ width: 400px;height: 400px;border: 1px solid red; display: flex;}
.item{ width: 100px;height: 100px; }
/* 一个盒子，可以通过width来设置盒子在主轴上占据的大小 */
/* 也可以通过flex-basis来设置盒子的大小 */
/* 如果说有width，又有flex-basis，那么是flex-basis起作用 */
.item1{ flex-basis: 200px; }
</style>
5）align-self： self自己的意思 设置某个项目在交叉轴上的位置
<style>
*{ margin: 0; padding: 0; }
.box{ width: 400px;height: 400px;border: 1px solid red; display: flex;}
.item{ width: 100px;height: 100px; }
/* .item3{ align-self: flex-end; } */
.item3{ align-self: center; }
</style>
6）flex： 是一个复合属性
flex:flex-grow flex-shrink flex-basis 基本上后面面两个属性不写
flex来代替flex-grow。 flex:1; ===> flex-grow:1;
三、色子案例
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="main.js"></script>
<style>
.container {
display: flex;
padding: 10px;
width: 150px;
height: 150px;
border: 2px solid red;
border-radius: 10px;
background: #fff;
box-shadow: 3px 3px 3px 0px #999;
margin: 50px;
}
.item {
width: 50px;
height: 50px;
background-color: aqua;
border-radius: 50%;
/*可以绘制成一个圆形*/
box-shadow: 1px 1px 2px 0px blue;
}
.one {
justify-content: center;
align-items: center;
}
.two {
justify-content: space-between;
align-items: center;
}
.three {
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.three div:first-child {
align-self: flex-start;
}
.three div:last-child {
align-self: flex-end;
}
.four {
/* flex-direction: column; */
justify-content: space-around;
}
.four .item {
margin: 15px;
}
.four div {
align-items: space-between;
}
.five,.six {
flex-direction: column;
flex-flow: wrap;
justify-content: space-around;
}
.five .item,.six .item {
margin-right: 10px;
margin-left: 10px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 一点 -->
<div class="container one">
<div>
<div class="item"></div>
</div>
</div>
<!-- 二点 -->
<div class="container two">
<div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
</div>
</div>
<!-- 三点 -->
<div class="container three">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- 四点 -->
<div class="container four">
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!-- 五点 -->
<div class="container five">
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<!-- 六点 -->
<div class="container six">
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
<div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</html>
运行结果显示为：
