FLEX布局
1.在外层容器设置display：flex; 内部的节点称为项目。
2.flex有两条轴，水平的主轴，和垂直的交叉轴
3.容器的6个属性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content
flex-direction
表示主轴的方向:row（水平向右(默认)）/row-reverse（水平向左）/column（竖直向下）/column-reverse（竖直向上）;
flex-wrap
表示轴线排满的换行方式:wrap（自动换行）/nowrap（禁止换行（默认））/wrap-reverse（向上换行）
flex-flow前两个的合集：比如row wrap;
justify-content
水平方向的排列方式:flex-start（左对齐(默认)）/flex-end（右对齐）/center（居中）/space-between（两端对齐）/space-around（等间隔排列，两端项目距离边界为项目间距离的一半）;
align-items
垂直方向的对齐方式：flex-start（向上对齐）/flex-end（乡向下对齐）/center（垂直居中）/stretch（没有设置高度的情况下，垂直方向上拉伸铺满（默认））/baseline（以项目的第一行文字的基线对齐）
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用：flex-start/flex-end/center/stretch/space-between/space-around
4.项目的属性：order/flex-grow/flex-shrink/flex-basic/flex/align-self
order:属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow:属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis。。。。。。。。。。。。。， :属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex:属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self:属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto | flex-start | flex-end | center | baseline | stretch;
5.使用flex实现元素的水平垂直居中
在默认也就是flex-direction: row;下比较正常，justify-content就是水平居中，而align-items就是垂直居中，但是
在flex-direction 为column下实现水平垂直居中情况就反过来了，设置align-items:center;结果是水平居中，而设置justify-content:center；则为垂直居中
<!DOCTYPE html>
<html>
<head>
<title>flex布局练习</title>
<style type="text/css">
html,body{
background: #8E8E8E;
}
.wraper{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container{
display: flex;
width: 200px;
height: 200px;
padding: 20px;
margin-bottom: 80px;
box-sizing: border-box;
border-radius: 5px;
background: #E4E4E4;
box-shadow: 1px 1px 2px 2px #BFBFBF;
}
.container > .container{
margin-left: 80px;
}
.dot{
width: 40px;
height: 40px;
background: #242424;
border-radius: 20px;
}
/*一点*/
.box1{
justify-content: center;
}
.item11{
align-self: center;
}
/*二点*/
/*.box2{
align-content: space-between;
flex-wrap: wrap;
}
.test{
display: flex;
flex-basis: 100%;
}*/
.box2{
justify-content: space-between;
}
.item22{
align-self: flex-end;
}
/*三点*/
.box3{
justify-content: space-between;
}
.item32{
align-self: center;
}
.item33{
align-self: flex-end;
}
/*四点*/
.box4{
align-content: space-between;
flex-wrap: wrap;
}
.box4 .group{
flex-basis: 100%;
display: flex;
justify-content: space-between;
}
/*五点*/
.box5{
align-content: space-between;
flex-wrap: wrap;
}
.box5 .group{
display: flex;
flex-basis: 100%;
justify-content: space-between;
}
.box5 .group:nth-child(2){
justify-content: center;
}
/*六点*/
.box6{
justify-content: space-between;
}
.box6 .group{
display: flex;
flex-wrap: wrap;
flex-basis: 40px;
}
.box6 .group .dot:nth-child(2){
align-self: center;
}
.box6 .group .dot:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="wraper">
<div class="box1 container">
<span class="item11 dot"></span>
</div>
<div class="box2 container">
<span class="dot"></span>
<span class="dot item22"></span>
</div>
<div class="box3 container">
<span class="dot"></span>
<span class="dot item32"></span>
<span class="dot item33"></span>
</div>
<div class="box4 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box5 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="item53 dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div class="box6 container">
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<div class="group">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</div>
</body>
</html>
