flex
1，flex布局又叫弹性布局，一个元素为flex布局时，子元素的float、clear和vertical-align属性没有作用。
列：以float为列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 300px;
height: 100px;
background: #000;
}
.box_child{
width: 50px;
height: 50px;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child"></div>
</div>
</body>
</html>
结果：
当给box_child添加float: right;
结果box_child还在原来位置，并未移到box右边。
2，flex布局下的属性：
2-1，flex-direction规定flex布局下的子元素怎么排列，可选值row ， row-reverse ，column ， column-reverse。
列：
如果是flex-direction：row；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 300px;
height: 100px;
background: #000;
flex-direction: row
}
.box_child1{
width: 50px;
height: 50px;
background: red;
}
.box_child2{
width: 50px;
height: 50px;
background:#f2f22f;
}
</style>
<body>
<div class="box">
<div class="box_child1"></div>
<div class="box_child2"></div>
</div>
</body>
</html>
结果：
如果是flex-direction：row-reverse；
如果是flex-direction：column；
如果是flex-direction：column-reverse；
2-2，flex-wrap定义如果一条轴线排不下，如何换行，可选值 nowrap ， wrap ，wrap-reverse，默认是nowrap。
列：
如果是flex-wrap:nowrap;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 250px;
background: #000;
padding: 20px;
flex-direction: row;
flex-wrap: nowrap;
}
.box_child{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child">1</div>
<div class="box_child">2</div>
<div class="box_child">3</div>
<div class="box_child">4</div>
<div class="box_child">5</div>
<div class="box_child">6</div>
</div>
</body>
</html>
结果：
box_child宽度变小，不换行。
如果是wrap：
box_child换行。
如果是wrap-reverse
box_child换行且从下往上排。
2-3，justify-content定义了子元素在主轴上的对齐方式，可选值有 flex-start ， flex-end ， center ，space-between ， space-around;
列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 250px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: flex-start;
}
.box_child{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child">1</div>
<div class="box_child">2</div>
<div class="box_child">3</div>
</div>
</body>
</html>
结果：
child_box从开始位置对齐
如果是justify-content: flex-end;
child_box从结束位置对齐
如果是justify-content: center；
child_box居中排列。
如果是 justify-content: space-between；
child_box两端对齐且主轴方向相隔距离相等
如果是justify-content: space-around；
每两个项目之间的间隔相等，上图看不出来，我们将box宽度设为600px，结果
2-4，align-items定义子元素在交叉轴上如何对齐，可选值flex-start ， flex-end，center ，baseline ， stretch。
列：
如果是align-items：flex-start;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 300px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: space-around;
align-items: flex-start
}
.box_child1{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
.box_child2{
width: 50px;
height: 100px;
border: 1px solid #ddd;
background: red;
}
.box_child3{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
.box_child4{
width: 50px;
height: 150px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child1">1</div>
<div class="box_child2">2</div>
<div class="box_child3">3</div>
<div class="box_child4">4</div>
</div>
</body>
</html>
结果：
可见child_box，从起始位置左上角，左往右排列，如果把上面的代码box的 flex-direction: row;改为 flex-direction: row-reverse;结果：
child_box从右往左排列。
如果是box的 flex-direction: row;align-items: flex-end;
child_box从左往右排列且起始位置在左下角。
如果是box的align-items: center；
从box的中部左往右排列，
另外
baseline定义子元素的第一行文字的基线对齐。
stretch定义如果子元素未设置高度或设为auto，那么子元素的高度将占满整个容器的高度。
2-5，align-content定义多根轴线的对齐方式，如果项目只有一根轴线，该属性无效，可选flex-start， flex-end ， center ， space-between ，space-around ，stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
3，如果定义了flex布局，那么它的子元素可选择属性有以下几种。
order定义子元素的排列顺序数值越小排列越靠前。
列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 400px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.box_child1{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
order: 1;
}
.box_child2{
width: 50px;
height: 100px;
border: 1px solid #ddd;
background: red;
order: 0;
}
.box_child3{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
order: 2;
}
.box_child4{
width: 50px;
height: 150px;
border: 1px solid #ddd;
background: red;
order: 2;
}
</style>
<body>
<div class="box">
<div class="box_child1">1</div>
<div class="box_child2">2</div>
<div class="box_child3">3</div>
<div class="box_child4">4</div>
</div>
</body>
</html>
结果：
flex-grow定义子元素的放大比例，将上面的元box_child1,box_child2,box_child3元素加上flex-grow:1,box_child4加上flex-grow:2;如果box有剩余空间那么box_child4占据的空间是其他的一倍
结果：
flex-shrink语flex-grow相反，是定义子元素缩小比例，如果box没有剩余空间，那么定义缩小的元素就缩小。
flex-basis它定义了在分配多余空间之前，子元素占据的主轴空间，根据这个计算主轴是否有多余空间，默认值为auto，即项目的本来大小。
我平常常用的flex，其实是flex-grow, flex-shrink 和 flex-basis的简写。
列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 400px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.box_child1{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
.box_child2{
flex: 1;
height: 100px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child1">1</div>
<div class="box_child2">2</div>
</div>
</body>
</html>
结果：
所以flex:1就是写了以下属性
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
align-self定义子元素的对齐方式，如果跟父元素的方式一样那么设置auto就行，当然如果不一样可以选择 flex-start， flex-end ， center ， baseline ， stretch。设置这个属性的结果跟在flexbox中设置align-item的结果一样。当你想让子元素不一样时就可以选择这个属性。
列:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 400px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.box_child1{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
.box_child2{
width: 50px;
height: 100px;
border: 1px solid #ddd;
background: red;
}
.box_child3{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
align-self: flex-end
}
.box_child4{
width: 50px;
height: 150px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child1">1</div>
<div class="box_child2">2</div>
<div class="box_child3">3</div>
<div class="box_child4">4</div>
</div>
</body>
</html>
结果：
相信大部分人面试的时候都遇到垂直水平居中的问题，那么利用flex如何实现,其实利用 justify-content: center;
align-items: center;
列：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试flexbox</title>
</head>
<style>
.box{
display: flex;
width: 400px;
height: 400px;
background: #000;
padding: 20px;
flex-direction: row;
justify-content: center;
align-items: center;
}
.box_child1{
width: 50px;
height: 50px;
border: 1px solid #ddd;
background: red;
}
</style>
<body>
<div class="box">
<div class="box_child1">1</div>
</div>
</body>
</html>
结果：
flex布局之前我也觉得复杂，项目中用得少，当用得多了，flex布局就越来越熟练，但是仍有不足，因此写这篇文章，意在复习和巩固flex布局的知识。
