Flex布局
今天在学习css的时候，学到了一个新的布局方式:Flex布局（弹性盒布局）。本人认为挺重要的，首写博客来巩固一下自己今天所学的有关Flex布局的知识，并与大家分享，内容如有错误，欢迎大家来给我指点一下。
文章目录
- Flex布局
- Flex简介
- 弹性容器
- 弹性元素
- 主轴与纵轴
- 弹性容器样式
- 弹性元素样式
> 本章节使用的基础代码(开启flex之前) <style> .wrapper{
width: 800px;
border: red solid 5px;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
}
.box1{
background-color: royalblue;
}
.box2{
background-color:yellow;
}
.box3{
background-color: salmon;
}
</style>
<body>
<div class="wrapper">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
Flex简介
Flex布局又称弹性盒布局，是css布局中的一个手段。主要是代替浮动来完成页面布局。
在没有Flex布局的时候，css主要是通过Float来水平布局，但是因为Float是为了文字排版才出现的一种技术，因此会有很多问题。例如：高度塌陷的问题。
可以这样理解，Flex布局之所以被称为弹性盒布局是因为flex可以使元素具有弹性，可随页面大小的变化而变化。
Flex有一个缺点就是浏览器的兼容性不够好。例如对于IE是失效的
弹性容器
要使用Flex布局，必须将元素设置为弹性容器。
display: flex;
display: inline-flex;
对.wrapper设置为弹性容器后效果如下
可见其水平排列
弹性元素
弹性容器的子元素就是弹性元素。注意：子孙元素不行。
一个元素既可以是弹性容器也可以是弹性元素。
<div class="wrapper">
<div class="box1">
<div class="box4"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
</div>
主轴与纵轴
先提前介绍一个弹性容器样式：flex-direction 指定弹性元素在弹性容器内的排列方向
flex-direction:column-reverse;
主轴：弹性元素的排列方向为主轴
侧轴：与弹性元素垂直的轴称为侧轴
如：当flex-direction:row时，主轴方向为自左向右 侧轴就是自上向下
当flex-direction:column-reverse时，主轴方向为自下向上 侧轴就是自右向左
按此类推
当flex-direction:row时：
当flex-direction:column-reverse;
弹性容器样式
弹性容器样式是为弹性容器设置的属性。
1.上面已经讲过的flex-direction
- flex-wrap:设置弹性元素是否在弹性容器内自动换行 默认值：nowrap
nowrap:元素不会自动换行
wrap:元素沿着侧轴方向换行
wrap-reverse:元素沿着侧轴的反方向换行`
这就是上面判断主轴和侧轴的作用
.wrapper{
width: 200px;
border: red solid 5px;
display: flex;
flex-direction:row;
flex-wrap: wrap;
}
.box1,.box2,.box3{
width: 100px;
height: 100px;
flex-shrink: 0;
}
.box1{
background-color: royalblue;
}
.box2{
background-color:yellow;
}
.box3{
background-color: salmon;
}
以主轴方向为row为例。
flex-wrap: nowrap;很明显看到其内部弹性元素不会换行
flex-wrap: wrap;很明显看到内部弹性元素自上到下换行
flex-wrap:wrap-reverse;很明显看到内部弹性元素自下到上换行
flex-flow: 是上面两个属性direction和wrap的简写属性
如：flex-flow: column wrap;设置主轴方向是从上到下， 元素沿着侧轴方向换行。
justify-content: 分配主轴上的空白空间，改变主轴元素的排列方式
可选项：
flex-start:元素沿主轴起边开始排列
flex-end:元素沿主轴终边开始排列
center:元素居中排列
space-around:空白分布到两侧
space-between:空白均匀分布到元素之间
space-envenly: 空白均匀分布在元素单侧（此项兼容性不高，如IE浏览器不兼容）
justify-content： flex-start;
justify-content： flex-end;
justify-content： center;
justify-content： space-around;
justify-content： space-between;
justify-content： space-envenly;
align-items: 每个元素在侧轴上的对齐方式
可选项：
stretch 默认值，在同一行每个元素之间的高度相同，不同行的高度可不同
flex-start 沿侧轴的起始边对齐,不会伸展
flex-end 沿侧轴的末尾边对齐
center 居中对齐
align-items: stretch;的情况
align-items: flex-start ；的情况
align-items: flex-end ；的情况
align-items: center；的情况
align-content: 分配侧轴上的空白空间
可选项：
flex-start:元素沿侧轴起边开始排列
flex-end:元素沿侧轴终边开始排列
center:元素居中排列
space-around:空白分布到两侧
space-between:空白均匀分布到元素之间
space-envenly: 空白均匀分布在元素单侧（此项兼容性不高，如IE浏览器不兼容）
跟justify-content:差不多。只不过一个是在主轴一个是在侧轴
align-items 和align-content的区别
根据上面我们可以发现align-items和align-content都是对侧轴进行作用的。align-items和align-content有相同的功能，但是align-items是对侧轴上的每个元素进行作用。align-content则是对``整个容器进行作用且align-content属性只适用于多行的flex容器。
举个例子理解一下
flex-flow: row wrap;
align-items:center;
下面就是设置了align-items:center且没有设置align-content的情况。
不设置align-items,设置align-content:center;的情况
通过上面这组可以对比到他们两个方式的不同，align-items是给每个元素的每一行都进行居中。而align-content这是对这整个容器的元素进行居中排列。若同时设置
align-items:center; align-content:center;效果会是跟只设置align-content:center;的效果一样。这说明了对于有多行的flex容器，align-content的优先级大于align-items。
若设置弹性容器不进行换行，设置align-content会不起作用，这说明了align-content属性只适用于多行的flex容器。
弹性元素样式
弹性元素样式是为弹性元素设置的属性
flex-grow: 指定弹性元素的伸展系数 默认值：0
当没有给弹性元素设定flex-grow时，弹性元素不伸展，即等于0
flex-grow:1 弹性元素伸展，且均匀伸展填充满空位
同时可以分别给每个弹性容器内的弹性元素分别设置flex-grow，使每个弹性元素按不同比例伸展。、
.box1,.box2,.box3{
width: 100px;
height: 100px;
flex-grow: 0;
}
flex-grow: 0;的情况
flex-grow:1的情况
分别给每个弹性元素设置flex-grow
.box1{
background-color: royalblue;
flex-grow: 1;
}
.box2{
background-color:yellow;
flex-grow: 2;
}
.box3{
background-color: salmon;
flex-grow: 3;
}
效果如下:
解释：这个弹性容器warpper的总宽度设定为800px,原先box1,box2,box3都是宽度高度为100px。
所以就会剩下500px的空白。因为设置了flex-grow不为0,所以box1的宽度会是100px+500*(1/6)px，box2的宽度会是100px+500*(2/6)px，box3的宽度会是100px+500*(3/6)px。
flex-shrink: 指定弹性元素的收缩系数 默认值:1
flex-shrink:1 当弹性元素的宽度或者高度超过弹性容器的高度和宽度的时候，弹性容器下的弹性元素会均匀收缩
当flex-shrink:0 弹性元素不收缩，就会溢出父类元素。
同样也可以分别对每个的弹性元素设置不同的flex-shrink. flex-shrink越大，收缩越大。
.box1,.box2,.box3{
width: 100px;
height: 100px;
flex-shrink: 1;
}
flex-shrink:1的情况
flex-shrink:0的情况
分别给每个弹性元素设置flex-shrink的情况
flex-basis:设置元素在主轴上的基础长度。
flex:可以设置弹性元素的三个样式（flex-grow，flex-shrink,flex-basis）
例如：flex:1,1,auto；
order:设置弹性元素的排列顺序
根据下图可以观察到设置order后，.box3排在了第一，box2排在了最后，改变了元素的排列顺序
.box1{
background-color: royalblue;
order: 2;
}
.box2{
background-color:yellow;
order: 3;
}
.box3{
background-color: salmon;
order: 1;
}
align-self:用来覆盖当前弹性元素的align-items属性，就是我们可以单独的给一个弹性元素设置不同的align-items属性。
举个例子：
当前整个情况是这样子的，每个元素都是在每一行处于居中位置。
当我们在给box1（蓝色那个元素）设置align-self:flex-end;后可以观察到蓝色的元素到达了当行的底部，即单独改变了box1的布局情况
