flex布局
flex布局又称为弹性布局，flex弹性盒子,flex盒子
其中的基础概念包含：
主轴和交叉轴 弹性容器和弹性子元素
主轴和交叉轴
元素在网页中横向排列的方向即可看做是主轴，元素在网页找你纵向排列的方向即可以看做是交叉轴。
代表了元素横向排列方向即为主轴，一个页面中有无数个主轴
代表了元素纵向排列方向的即为交叉轴，一个页面中有无数个交叉轴
默认情况下，主轴上的元素排列从左往右，交叉轴上的元素默认会从上到下排列
弹性容器和弹性子元素
要想要使用flex弹性盒子，需要给父容器设置属性：display: flex或者display:inline-flex。
如果给父容器设置了上述的两个属性之一，那么父容器就可以称之为弹性容器，子元素(儿子不包括其他级别的后代元素)就可以称为叫做弹性子元素。
当元素设置为display:flex时，弹性容器相当于是变成了一个块元素，那么这个弹性容器将不能和其他的块并排显示。
当元素设置为display:inline-flex时，弹性容器相当于变成了一个行内块元素，可以和其他的行内元素或者行内块元素并排显示。（当设置成diaplay-inline-flex时 文本中的margin属性将会失效，想要将元素水平居中 需要给父元素设置 text-align: center;）
弹性容器属性
1.flex-direction设置主轴的方向
默认情况下，主轴方向从左向右，我们可以通过flex-direction来调整主轴方向
属性值：
row(默认值)主轴为水平方向，项目排列起点在左端row-reverse主轴为水平方向，起点在右端column主轴方向为垂直方向，起点在上沿column-reverse主轴方向为垂直方向，起点在下沿
2.flex-warp换行
属性值：
nowarp(默认值)不换行warp换行，第一行在上方warp-reverse换行，第一行在下方
3.flex-flow
这个属性是flex-direction 和flex-warp属性的简写
4.justify-content设置元素在主轴上的排列方式(这个属性很常用)
该属性可以设置元素在主轴上的排列方式
属性值:
flex-star（默认值）表示元素在主轴上默认左对齐flex-end元素右对齐，需要注意，主轴方向没有发生改变，还是从左往右center元素左右居中排列space-between: 两端对齐，子元素之间的间隔相等space-around: 子元素之间的间隔相等。两端间隔相等。两端的元素距离边界的距离是元素与元素之间间隔的一半space-evenly子元素在容器中平局分配空间，两端的元素距离边界的距离和元素与元素之间的间隔是完全相等的。
5.align-items元素在交叉轴排列方式(这个属性很常用)
该元素可以设置元素交叉轴的对其排列方式
属性值:
flex-start元素在交叉轴的起点对齐flex-end元素在交叉轴的终点对齐center元素在交叉轴的中点对齐baseline基线对齐stretch(默认值) ，如果子元素未设置高度或者设为auto，将占满整个容器的高度。
6.align-content 多行元素在交叉轴的排列方式
该元素能够设置多行元素在交叉轴如何排列，如果子元素只有一行，则该属性失效，建议使用align-items
属性值：
flex-start多行元素在交叉轴的起始位置排列，多行元素之间没有空隙flex-end多行元素在交叉轴的终点位置排课，多行元素之间没有空隙center多行元素在交叉轴的中点位置排列，多行元素之间没有空隙space-between多行元素在交叉轴上平均分配空间排列，最前面和最后面的元素结贴边界space-around多行元素在交叉轴上平均分配空间排列，最前面和最后面的元素距离边界有元素与元素之间间隔一半的距离space-evenly多行元素在交叉轴上平均分配空间排列，间距相同。
弹性容器属性
1.order属性 调整元素配列顺序
order 属性能够在不改变代码结构的前提下，可以修改元素的渲染位置 给弹性子元素设置order属性，值越小，元素排列越靠前
2.flex-grow定义元素的放大比例
这里有一个新的概念，剩余空间
什么是剩余空间：主轴方向上没有被占用的宽度即为剩余空间，而flex-grow设置的即为元素占据剩余空间的比例。
例如:
html
<!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>Document</title>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid red;
display: flex;
}
.box div {
width: 100px;
height: 100px;
/* border-radius: ; */
}
div.d1 {
background-color: pink;
flex-grow: 2;
}
.d2 {
/* border-radius: 50%; */
background-color: lightblue;
flex-grow: 1;
}
/* 200 / 4 = 50 */
div.d3 {
background-color: orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
</html>比如上面的代码中 d1 flex-grow 为2 ,d2 和d3 的flex-grow 为1 就相当于把剩余空间分成4份，d1 占2份，d2和d3各占一份
3.flex-shrink定义元素的缩小比例
弹性子元素默认情况下，在父容器宽度不够的时候，会进行自动缩小，缩小比例就由flex-shrink属性来进行控制(默认值为1)
如果将某个属性的缩小比例值设置为0，那么当容器宽度不够的时候，该元素就不会发生缩小的现象。
4.flex-basis属性
该属性设置的是元素在主轴上占据的宽度，会默认我换掉元素宽度，如果元素不在是弹性子元素，那么将会变回原来本身的宽度
5.aligin-self属性
该属性用来设置子元素在交叉轴上的对齐方式
属性值如下:
auto表示继承父容器的align-items属性flex-start元素在交叉轴的起点对齐flex-end元素在交叉轴的终点对齐center元素在交叉轴的中点对齐baseline基线对齐stretch沿着交叉轴方向自动进行拉伸到最大
flex简写
flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
- flex: 1
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 0%;
- flex: 2
- flex-grow: 2;
- flex-shrink: 1;
- flex-basis: 0%;
- flex: 100px
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 100px;
- flex: 200px
- flex-grow:1;
- flex-shrink: 1;
- flex-basis: 200px
- flex: 1 2;
- flex-grow:1;
- flex-shrink: 2;
- flex-basis:0%;
- flex: 2 3;
- flex-grow: 2;
- flex-shrink: 3;
- flex-basis: 0%;
- flex: 1 200px;
- flex-grow: 1;
- flex-shrink: 1;
- flex-basis: 200px;
- flex: 2 200px;
- flex-grow: 2;
- flex-shrink: 1;
- flex-basis: 200px;
flex布局的一些小应用
- 元素在网页中上下左右据居中
css
html, body {
height: 100%;
}
body {
display: flex;
/* 元素在主轴居中 */
justify-content: center;
/* 元素在交叉轴居中 */
align-items: center;
}- 移动端网页必须要设置的样式
css
html,body{
height:100%;
}
body{
display: flex;
flex-direction: column;
}
main{
flex: 1
}