五分钟学会flex布局
很长一段时间没有更新我的技术贴了
因为前阵子要准备一些教学资料，耽误了很长时间
本文是给不了解flex布局的小伙伴学习，大神可以绕道
flex布局是什么？
一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。非常灵活的处理布局，但是也有一个致命的问题，兼容性，各位做开发之前一定要了解兼容性的问题才好选择是否用flex布局
小Demo看出flex布局的强大
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 30px;
text-align: center;
line-height: 200px;
}
.warp{
height: 1100px;
/*一句话就能让warp下面三个盒子进行类似于浮动的效果，还不用清除浮动*/
display: flex;
flex-direction: row;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: gray;
}
</style>
</head>
<body>
<div class="warp">
<div class="box box1">第一个</div>
<div class="box box2">第二个</div>
<div class="box box3">第三个</div>
<div class="box box4">第四个</div>
</div>
</body>```
###什么是主轴
>其实flex布局主要是由主轴和侧主轴来进行配合，从而实现搭配的
/*html文件一样，直接将这个css中的warp进行替换
* flex-direction定义主轴的方向
* row从左往右，默认
* row-reverse从右往左
* column从上往下
* column-reverse从下往上
*
* */
.warp{
height: 1100px;
display: flex;
flex-direction: row;
}
###主轴的对齐方式
>以前写盒子的外边距的时候经常使用margin，这时候只要我们使用主轴的对齐方式，就能轻松实现，多个盒子的整齐排列
.warp{
margin: 0 auto;
width: 1100px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: row;
justify-content: space-between;
}
----
#####换行
**Demo**
<title></title>
<style type="text/css">
/*flex布局的兼容性稍微差点
* 移动端好朋友flex布局
* 因为移动端的手机，一般浏览器会比较高级
* pc兼容性差点
*
* */
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 30px;
text-align: center;
line-height: 200px;
}
.warp{
/*父盒子采用flex布局，就能轻松实现汇聚在一行*/
/*默认情况下，我们是不换行*/
/*flex-wrap设置换行
* nowrap不换行，默认
* wrap换行
* wrap-reverse另起一行在上方
* */
display: flex;
flex-direction: row;
/不换行的设置/
flex-wrap: nowrap;
/换行的设置/
flex-wrap: wrap;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: gray;
}
</style>
</head>
<body>
<div class="warp">
<div class="box box1">第一个</div>
<div class="box box2">第二个</div>
<div class="box box3">第三个</div>
<div class="box box4">第四个</div>
<div class="box box1">第五个</div>
<div class="box box2">第六个</div>
<div class="box box3">第七个</div>
<div class="box box4">第八个</div>
<div class="box box1">第九个</div>
<div class="box box2">第十个</div>
<div class="box box3">第十一个</div>
<div class="box box4">第十二个</div>
</div>
</body>
#####设置不换行的情况下
####设置换行
---
###侧轴
>和主轴垂直方向的就是侧轴
<style type="text/css">
/*flex布局的兼容性稍微差点
* 移动端好朋友flex布局
* 因为移动端的手机，一般浏览器会比较高级
* pc兼容性差点
*
* */
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 30px;
text-align: center;
line-height: 200px;
}
/*父盒子采用flex布局，就能轻松实现汇聚在一行*/
/*align-items设置侧轴的方向
*
* 侧轴的方向，
* 如果主轴是竖着的，那么侧轴就是横着的，并且是从左往右
* 主轴如果横着的，那么侧轴就是从上到下
*
* stretch子元素没有高度或者宽度的情况下，然后进行拉伸，铺满
* flex-start侧轴开始的位置
* flex-end侧轴结束位置
* center中心，能实现居中
* baseline侧轴以文字的基准线为对齐
* */
.warp{
margin: 0 auto;
width: 1100px;
height: 500px;
border: 1px solid #000;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: gray;
}
</style>
</head>
<body>
<div class="warp">
<div class="box box1">第一个</div>
<div class="box box2">第二个</div>
<div class="box box3">第三个</div>
<div class="box box4">第四个</div>
</div>
</body>
>侧轴的对齐方式
规定我们内容的侧轴排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*flex布局的兼容性稍微差点
* 移动端好朋友flex布局
* 因为移动端的手机，一般浏览器会比较高级
* pc兼容性差点
*
* */
body{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
border: 3px solid #000;
font-size: 20px;
text-align: center;
line-height: 200px;
}
/*父盒子采用flex布局，就能轻松实现汇聚在一行*/
/*align-content侧轴的对齐方式
* center侧轴中心对齐，无间隙
* flex-end侧轴底部对齐
* flex-start侧轴顶部对齐
* space-around是环绕对齐，侧轴开始与结束之间和父盒子有相同间隙，然后内容之间也有相同间隙
* space-between侧轴开头和结束无间隙对齐，然后中间内容间隙一样
* */
.warp{
margin: 0 auto;
width: 800px;
height: 900px;
border: 1px solid #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
align-content: space-between;
}
.box1{
background-color: skyblue;
}
.box2{
background-color: yellow;
}
.box3{
background-color: green;
}
.box4{
background-color: gray;
}
</style>
</head>
<body>
<div class="warp">
<div class="box box1">第一个</div>
<div class="box box2">第二个</div>
<div class="box box3">第三个</div>
<div class="box box4">第四个</div>
<div class="box box1">第五个</div>
<div class="box box2">第六个</div>
<div class="box box3">第七个</div>
<div class="box box4">第八个</div>
<div class="box box1">第九个</div>
</div>
</body>
</html>
>当然分清楚主轴和侧轴对我们理解flex布局有着非常重要的意义，上面的图片仅为小部分例子，当中有很多参数已经是写在代码内的注释，各位小伙伴有空多研究，我也会继续更新flex布局详细的内容，包括兼容性的问题
