flex布局又叫弹性布局 = 伸缩布局 = 弹性盒布局
当我们为父盒子设为flex后，子元素的float，clear和vertical-align属性将失效
flex 原理
通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
1.flex-direction属性
取值：row(默认) | row-reverse | column | column-reverse
flex布局 首先就会有主轴和侧轴，flex-direction就可以设置主轴方向，剩下的就是侧轴方向
<style>
.box {
display: flex;
flex-direction: row;
width: 500px;
height: 500px;
border: 1px solid;
}
.box span {
width: 50px;
height: 50px;
margin: 10px;
}
.span1 {
background: pink;
}
.span2 {
background: greenyellow;
}
.span3 {
background: burlywood;
}
</style>
<div class="box">
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
</div>
父级设置 flex-direction: row;此时主轴也就是横向，子集就会由左往右排列
<style>
.box {
display: flex;
flex-direction: row-reverse;
width: 500px;
height: 500px;
border: 1px solid;
}
.box span {
width: 50px;
height: 50px;
margin: 10px;
}
.span1 {
background: pink;
}
.span2 {
background: greenyellow;
}
.span3 {
background: burlywood;
}
</style>
<div class="box">
<span class="span1">1</span>
<span class="span2">2</span>
<span class="span3">3</span>
</div>
父级设置 flex-direction: row-reverse;此时主轴也就是横向，子集就会由右往左排列
justify-content
justify-content设置主轴上的子元素排列方式
| 属性 | 说明 |
|---|---|
| flex-start | 默认从头开始，比如主轴如果是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐如果主轴是x轴则水平居中 |
| space-around | 平分剩余空间两边有点距离 |
| space-between | 先两边贴边再平分剩余空间 |
| 让我们再看看每个的效果 |
justify-content：flex-start 沿着住轴方向从头排列，很多情况向我们是没有设置住轴的也就相当flex-direction:row
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
flex-end | 从尾部开始排列
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
justify-content: center; | 在主轴居中对齐如果主轴是x轴则水平居中
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: center;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
justify-content: space-around;平分剩余空间两边有点距离(两边的距离是中间距离的一半)
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
justify-content: space-between;
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
我们住轴设置成y轴然后justify-content：center；看下效果
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: column;
justify-content: center;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
很好玩有没有
2.flex-wrap属性
flex-wrap设置元素是否换行
flex中 默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
| 属性 | 说明 |
|---|---|
| nowrap | 默认不换行 |
| wrap | 换行 |
| 让我们再看看每个的效果 |
```
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
}
.box span {
width: 100px;
height: 100px;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
```
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
这时候有同学就说了，不对呀，换行后不应该紧贴一起嘛，很简单只需要加一个属性，align-content：flex-start；即可，这个属性我们稍后会详解，先看下效果
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
2.align-items 属性 align-items 设置侧轴上的子元素的排列方式（单行）
| 属性 | 说明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸 |
| 让我们再看看每个的效果 |
flex-start 单行从上往下显示
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
flex-end
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
center 侧轴 单行 居中
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: center;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
align-items:stretch; 拉伸， 子集不设置高度，然后就会拉伸满
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
align-items: stretch;
}
.box span {
width: 100px;
/* height: 100px; */
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
2.align-content属性
align-content 设置的是侧轴上的子元素排列方式（多行）
flex中 默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面
| 属性 | 说明 | |
|---|---|---|
| flex-start | 默认从侧轴头部开始排列 | |
| flex-end | 在侧轴从尾部开始排列 | |
| center | 在侧轴居中显示 | 元素高度 |
| space-around | 子项在侧轴平分剩余空间 | |
| space-between | 先两边贴边再平分剩余空间 | |
| stretch | 设置子项元素高度平分父元素高度 | |
| 让我们再看看每个的效果 |
align-items：flex-start；
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
align-items:center
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
align-content:flex-end;
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
}
.box span {
width: 100px;
height: 100px;
margin-top: 0;
}
.box span:nth-child(1) {
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
}
.box span:nth-child(3) {
background: pink;
}
.box span:nth-child(4) {
background: blanchedalmond;
}
.box span:nth-child(5) {
background: greenyellow;
}
.box span:nth-child(6) {
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
6.flex-flow属性
flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap
比如： flex-flow：row wrap；
就相当于 flex-direction：row; flex-wrap:wrap;
二、项目的属性
1、order属性：定义项目的排列顺序，数值越小排列越靠前，默认为0，
order：整数
2、flex-grow属性：定义项目的放大比例，当有剩余空间时即会根据该值进行放大，默认为0，即有剩余空间时也不放大
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3、flex-shrink属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效
4、flex-basis属性：定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
5、flex属性：是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
6、align-self属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
有六个属性值：auto | flex-start | flex-end | center | baseline | stretch
flex:1;
flex: 属性定义子元素分配剩余空间，用flex 来表示占多少份数
.item {
flex:<number>; // default 0
}
比如 用flex 实现一个圣杯布局
<style>
.box {
width: 100%;
height: 500px;
border: 1px solid;
display: flex;
}
.box span {
width: 100px;
/* height: 100px; */
margin-top: 0;
}
.box span:nth-child(1) {
width: 200px;
background: blanchedalmond;
}
.box span:nth-child(2) {
background: greenyellow;
flex: 1;
}
.box span:nth-child(3) {
height: 200px;
background: pink;
}
</style>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
微信搜索前端架构师 qdleader，可以进群，还有每日更新的前端面试题库github.com/qdleader/qd… 来呀，一起进步呀！
