学习最好的方法就是把你知道的告诉别人
flex布局在网页布局应用广泛。优点：响应式、使用简单、布局灵活，废话不多说，马上开始搞定它。
/************ 初始代码 *************/
<!-- html -->
<div class='container'>
<div class='box1'></div>
<div class='box2'></div>
<div class='box3'></div>
</div>
<!-- css -->
.container {
display:flex;
}
.box1 {
width:100px;
height:100px;
background-color:red;
}
.box2 {
width:100px;
height:100px;
background-color:yellow;
}
.box3 {
width:100px;
height:100px;
background-color:green;
}
要点1：display:flex
给元素添加了display:flex，那么该元素就会变成flex容器，这是上面代码效果图：
要点2：flex-direction
flex-direction设置父容器的排列方向，那么子元素就会以row（水平方向）或column（垂直方向）排列。
flex-direction属性：
- row（默认值）子元素按水平方向排列
- column 子元素按垂直方向排列
- row-reverse （子元素按row的相反顺序排列并靠右）
- column-reverse (子元素按column相反顺序排列并靠底)
.container {
display:flex;
flex-direction:column;
}
上面代码给父容器设置了flex-direction:column属性，那么子元素就会被以列的方式排列。
其他属性自己分别试试哦
要点3：justify-content对齐元素
justify-content 使子元素沿主轴排列，当flex-direction:row时，父容器的主轴就是水平方向的，当flex-direction:column时，父容器的主轴就是垂直方向的。
justify-content属性值：
-
center让子元素在父容器中沿主轴方向居中对齐,当方向为行时，水平居中，当方向为列时，垂直居中 -
flex-start让子元素在父容器中沿主轴方向靠头放置 -
flex-end让子元素在父容器中沿主轴方向靠尾放置 -
space-between让头子元素和尾子元素在父容器中沿主轴靠最两端放置，中间各子元素间距均分 -
space-around跟space-between相似，头尾子元素跟容器的边界有一定间距，中间各子元素间距均分
这些概念是不是很抽象？没关系看代码和效果你就马上能够理解了。
主轴方向为水平方向：
-
center让子元素在父容器中沿主轴方向居中对齐,当方向为行时，水平居中，当方向为列时，垂直居中
/* 子元素居中 */
.container {
height:500px;
display:flex;
flex-direction:row;
justify-content:center;
background-color:gray;
}
justify-content:center
-
flex-start让子元素在父容器中沿主轴方向靠头放置
/* 子元素靠头 */
.container {
height:500px;
display:flex;
flex-direction:row;
justify-content:flex-start;
background-color:gray;
}
justify-content:flex-start
-
flex-end让子元素在父容器中沿主轴方向靠尾放置
/* 子元素靠尾 */
.container {
height:500px;
display:flex;
flex-direction:row;
justify-content:flex-end;
background-color:gray;
}
justify-content:flex-end
-
space-between让头子元素和尾子元素在父容器中沿主轴靠最两端放置，中间各子元素间距均分
/* 首尾子元素靠边 ，中间均匀分布*/
.container {
height:500px;
display:flex;
flex-direction:row;
justify-content:space-between;
background-color:gray;
}
justify-content:space-between
-
space-around跟space-between相似，头尾子元素跟容器的边界有一定间距，中间各子元素间距均分
/* 首尾子元素不靠边 ，中间均匀分布*/
.container {
height:500px;
display:flex;
flex-direction:row;
justify-content:space-around;
background-color:gray;
}
justify-content:space-around
主轴方向为垂直方向：
.container {
height:500px;
display:flex;
flex-direction:column;
justify-content:center;
background-color:gray;
}
justify-content:center
.container {
height:500px;
display:flex;
flex-direction:column;
justify-content:flex-start;
background-color:gray;
}
justify-content:flex-start
.container {
height:500px;
display:flex;
flex-direction:column;
justify-content:flex-end;
background-color:gray;
}
justify-content:flex-end
.container {
height:500px;
display:flex;
flex-direction:column;
justify-content:space-between;
background-color:gray;
}
justify-content:space-between
.container {
height:500px;
display:flex;
flex-direction:column;
justify-content:space-around;
background-color:gray;
}
justify-content:space-around
要点4：align-items
与主轴垂直的叫交叉轴，align-items表示子元素沿交叉轴排列，row的交叉轴是垂直方向的，column的交叉轴是水平方向的。
align-items的属性：
- center 子元素在交叉轴上居中排列，当方向为行时，元素垂直居中，当方向为列时，元素水平居中
- flex-start 从父容器头部（最前端）开始放置
- flex-end 从父容器尾部（最底部）开始放置
- stretch 沿交叉轴方向拉伸项目，填满flex容器（父容器）
- baseline 各子元素沿文字基线对齐
下面请仔细看各个属性的不同之处吧。
当flex-direction:row时(交叉轴为垂直方向)
-
center:子元素在交叉轴上居中排列，当方向为行时，元素垂直居中，当方向为列时，元素水平居中
.container {
height:500px;
display:flex;
flex-direction:row;
align-items: center;
background-color:gray;
}
-
flex-start：从父容器头部（最前端）开始放置
.container {
height:500px;
display:flex;
flex-direction:row;
align-items:flex-start;
background-color:gray;
}
align-items:flex-start
-
flex-end：从父容器尾部（最底端）开始放置
.container {
height:500px;
display:flex;
flex-direction:row;
align-items:flex-end;
background-color:gray;
}
-
stretch：沿交叉轴方向拉伸项目，填满flex容器（父容器）
.container {
height:500px;
display:flex;
flex-direction:row;
align-items:stretch;
background-color:gray;
}
/* */
.box1 {
width:100px;
background-color:red;
}
.box2 {
width:100px;
background-color:yellow;
}
.box3 {
width:100px;
background-color:green;
}
-
baseline各子元素沿文字基线对齐
.container {
height:500px;
display:flex;
flex-direction:row;
align-items:baseline;
background-color:gray;
text-align:center;
}
.box1 {
width:100px;
height:100px;
font-size:30px;
background-color:red;
}
.box2 {
width:100px;
height:100px;
font-size:20px;
background-color:yellow;
}
.box3 {
width:100px;
height:100px;
background-color:green;
}
tips:如何利用justify-content（主轴） 和align-items（交叉轴），让子元素水平和垂直居中。
请看代码吧：
.container {
height:500px;
display:flex;
justify-content:center; /*** 水平居中 ***/
align-items:center; /*** 垂直居中 ***/
background-color:gray;
}
soeasy对吧！！！
要点5：flex-wrap
默认flex容器会把自动调整子元素的大小，如果是方向为row的话把它们塞在一行（水平线）里面
使用flex-wrap 包裹一行或一列，可以使多出来的子元素移到新的行或新的列。(只在水平方向有效果)
属性值：
- nowrap 默认值
- wrap 多余的移动新的行中
- wrap-reverse 跟wrap的方向颠倒
-
nowrap默认值（不换号）
.container {
height:500px;
display:flex;
flex-wrap:nowrap;
background-color:gray;
}
.box1 {
width:50%;
height:50%;
background-color:red;
}
.box2 {
width:50%;
height:50%;
background-color:yellow;
}
.box3 {
width:50%;
height:50%;
background-color:green;
}
-
wrap多余的移动到新的行中
.container {
height:500px;
display:flex;
flex-wrap:wrap;
background-color:gray;
}
-
wrap-reverse跟wrap的方向颠倒
.container {
height:500px;
display:flex;
flex-wrap:wrap-reverse;
background-color:gray;
}
要点6：flex-shrink
-
flex-shrink见其名，知其意，就知道它是用来收缩元素的，当容器的大下，小于元素的大小的时候，该元素就会被压缩放小，比如，当容器的宽度小于元素的宽度时，元素就会被自动压缩。 -
flex-shrink它 接受的是number类型的值。 -
number的值越大，该元素相比其他元素的被压缩的更大，反之，压缩更小，比如，A元素的flex-shrink:1，B元素的flex-shrink:2,那么B跟A相比就被压缩2倍。
.container {
height:500px;
display:flex;
background-color:gray;
}
.box1 {
width:100%;
height:50%;
background-color:red;
flex-shrink:1;
}
.box2 {
width:100%;
height:50%;
background-color:yellow;
flex-shrink:2;
}
要点7：flex-grow
flex-grow：与flex-shrink相反，它用来扩展元素。flex-shrink为容器较小时，对元素进行相应调整，flex-grow为当容器较大时，对元素进行相应调整
比如 A元素的flex-grow:1,B元素的flex-grow:2时，那么B比A大2倍。
.container {
height:500px;
display:flex;
background-color:gray;
}
.box1 {
height:50%;
background-color:red;
flex-grow:1;
}
.box2 {
height:50%;
background-color:yellow;
flex-grow:2;
}
要点8：flex-basic
flex-basic 用来设置当元素使用了flex-shrink或flex-grow前的初始大小。
flex-basic 接受的值px、em、%、rem 等，auto的话，大小依赖于自身的内容
.container {
height:500px;
display:flex;
background-color:gray;
}
.box1 {
height:50%;
background-color:red;
flex-basis:100px;
flex-grow:1;
}
.box2 {
height:50%;
background-color:yellow;
flex-basis:200px;
flex-grow:5;
}
要点9：flex 属性简写
flex:1 2 30px; ：表示把该元素设置为flex-grow: 1;、 flex-shrink: 2;和flex-basis: 30px;
box1 为flex:3 3 100px; 和box2 为flex-grow:1 1 100px;
表示当容器的大于200px 时，box1 会被填充倍率为box2 的3 倍，当容器的小于200px 时，它的压缩倍率为box2 的3 倍。200px 为两个元素的flex-basis的值之和。
.container {
height:500px;
display:flex;
background-color:gray;
}
.box1 {
height:50%;
background-color:red;
flex:3 3 100px;
}
.box2 {
height:50%;
background-color:yellow;
flex-grow:1 1 100px;
}
大于200px时
要点10： order 给元素设置排列的顺序
html里的元素默认是从上往下排列，使用order可以更改它们的放置的顺序，数值越小排在前面，接受负数。
.container {
height:500px;
display:flex;
background-color:gray;
}
.box1 {
width:100px;
height:50%;
background-color:red;
order:1;
}
.box2 {
width:100px;
height:50%;
background-color:yellow;
order:-1;
}
黄色盒子被放置在红色盒子前
担心大家不能理解主轴和交叉轴，特附上了两张图方便理解。
当你理解了主轴和交叉轴，你就能很快能分清楚当容器为行或列的方向时，能迅速对元素设置你想要的效果了，没能马上理解也没关系，应用多了，再回来回顾复习，相信很快就能掌握。
flex布局到这里就结束了！！！，有木有很简单，你学会了吗？
最后补一条，看到的永远是别人的，做了才是自己的。
