flex介绍
flex是弹性盒布局的意思，用来为盒子模型提供灵活性。采用flex布局的盒子叫做容器，它的子元素叫做项目；容器有水平的主轴和与它垂直的交叉轴。如下图所示：
flex.png
如果你是已经了解flex布局的小伙伴，仅仅用来查询一下它们可以设置的属性值以及兼容的版本，那么下面的容器属性查询表和项目属性查询表就满足你的需求啦～如果还不了解每个的具体实现效果，那就认真实现下面的例子吧
容器的属性查询表
image.png
项目的属性查询表
image.png
兼容性查询表
flex.png
flex布局应用及详解
我们通过一个实际的🌰来看看flex到底能做什么吧。现在我们的🀄️上场了，从1饼到9饼用flex怎么排布呢？就拿几个典型的的来实践一下（下面会展示1，3，5，9实现方式）
- 首先我们来实现“1饼”的效果
flex-demo1.png
- 第一步设置一个容器作为外框
display: flex - 第二步增加一个项目作为“饼”
- 第三步让项目在主轴方向上居中
justify-content: center - 第四步让项目在交叉轴居中
align-items: center
好了拆解完成，直接上代码
<div class="wrap">
<div class="box"></div>
</div>
.wrap {
width: 200px;
height: 300px;
border: 1px solid #ddd;
border-radius: 10px;
margin: 20px auto;
/* flex 相关 */
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50px;
height: 50px;
background-color: #666;
border-radius: 25px;
}
- 然后我们来实现“3饼”的效果
flex-demo2.png
- 第一步设置一个容器作为外框
display: flex - 第二步设置项目排列方向为竖向
flex-direction: column - 第三步设置主轴两端对齐
justify-content: space-around - 第四步设置交叉轴居中对齐
- 第五步设置单个项目与其他项目不同的对齐方式
align-self
上代码
<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</div>
.wrap {
width: 20px;
height: 30px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 20px auto;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.box {
width: 6px;
height: 6px;
background-color: #666;
border-radius: 3px;
}
.box1 {
align-self: flex-start;
}
.box3 {
align-self: flex-end;
}
- 加油实现“5饼”的效果
flex-demo3.png
- 第一步设置容器
display: flex - 第二步设置换行
flex-wrap: wrap - 第三步设置嵌套的项目为容器
display: flex - 第四步设置在主轴上两端对齐
justify-content: space-around - 第五步设置在交叉轴上居中对齐
align-items: center - 第六步设置项目占据主轴的空白空间
flex-basis: 100%
好了，上代码
<div class="wrap">
<div class="column">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
<div class="column">
<div class="box box3"></div>
</div>
<div class="column">
<div class="box box4"></div>
<div class="box box5"></div>
</div>
</div>
.wrap {
width: 20px;
height: 30px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
}
.column {
flex-basis: 100%;
display:flex;
align-items: center;
justify-content: space-around;
}
.box {
width: 6px;
height: 6px;
background-color: #666;
border-radius: 3px;
}
- 最后实现一个“9饼”的效果
flex-demo4.png
- 第一步设置一个容器
display: flex - 第二步设置换行
flex-wrap: wrap - 第三步设置主轴居中对齐
justify-content: center - 第四步设置交叉轴居中对齐
align-items: center
上代码
<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
<div class="box box9"></div>
</div>
.wrap {
width: 20px;
height: 30px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 20px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
width: 6px;
height: 6px;
background-color: #666;
border-radius: 3px;
}
例子写到这里，大家发现基本上容器的属性已经全部被利用了，总结起来就是主轴设置用justify-content，交叉轴用align-items，多根轴线用align-content，切换主轴用flex-direction，想要换行用flex-wrap，最后简写用align-content；项目的属性也有用到align-self调整自身的对齐，和flex-basis分配剩余的空间之前项目大小设置
附加“三圣杯”效果实现
demo.png
分析：
- 首先容器分为上中下三个项目，纵向排列
- 然后中间的内容左右定宽，中间占满
代码：
<div class="wrap">
<header></header>
<div class="main">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
<footer></footer>
</div>
.wrap {
height: 300px;
display: flex;
flex-direction: column;
}
header, footer {
flex: 1;
background-color: #aed507;
}
.main {
display: flex;
flex: 1;
}
.left, .right {
flex: 0 0 50px;
background-color: #c369fa;
}
.content {
flex: 1;
}
