flex布局是一种弹性布局，像对应于传统的布局（左右浮动，清除浮动）简单便捷，但是浏览器兼容性比较低，下面介绍一下flex布局的用法。
他的用法是给父盒子添加display：flex；属性然后就实现了flex布局，非常快捷简单框架搭完就该精装修了。
flex-direction 设置主轴方向
首先讲flex的主轴排列方式flex-direction属性用来调整主轴方向,这个属性共四个值，分别是row（默认），row-reverse，column，column-reverse。分别代表水平向右，水平向左，垂直向下，垂直向上
.father{
display:flex;
flex-direction:row; /* 这个是默认的 水平向右*/
flex-direction:row-reverse;/* 水平向左*/
flex-direction：column;/* 垂直向下*/
flex-direction：column-reverse;/* 垂直向上*/
}
justify-content 设置主轴元素排列方式
设置主轴方向排方式使用justify-content属性，该属性有六个参数，flex-start,center,flex-end,space-between,space-around,space-evenly,分别是主轴起始点对齐，主轴居中对齐，主轴末端对齐，两端贴边中间等分，两边距离是中间间距的一半，全等分排列
.father{
display:flex;
justify-content: flex-start; /* 从开始位置排列*/ 默认值
justify-content: flex-end; /* 靠末尾排 */
justify-content: center; /* 居中排列 */
justify-content: space-around; /*对称排列，中间等分，两边留中间的半 */
justify-content: space-between; /* 等分排列，两边不留边距 */
justify-content: space-evenly; /* 全等分，开头和末尾间距和中间一样 */
}
align-content设置交叉轴排列方式
该属性与justify-content属性几乎相同，只不过一个是设置主轴，一个是设置交叉轴，属性值与justify-content相同，作用也相同，只是一个主轴一个交叉轴
.father{
display:flex;
align-content: flex-start; /* 从开始位置排列*/ 默认值
align-content: flex-end; /* 靠末尾排 */
align-content: center; /* 居中排列 */
align-content: space-around; /*对称排列，中间等分，两边留中间的半 */
align-content: space-between; /* 等分排列，两边不留边距 */
align-content: space-evenly; /* 全等分，开头和末尾间距和中间一样 */
}
align-items 设置交叉轴排列方式
align-items时在父元素只有一行元素时使用，flex-start，center，flex-end，baseline,stretch五个属性，分别时交叉轴起始位置，交叉轴居中，交叉轴末尾方向，基线对齐，拉伸。当父元素没有使用align-content时使用align-items:stretch;会将没有设置高都的子元素拉伸到和父元素一样高。baseline是将子元素基线对齐，，其他的三个align-content的效果相同（仅限单行）
.father{
/* 交叉轴排列方式 align-items 用于单行时交叉轴的排列*/
align-items: flex-start; /*从开始位置对齐 */
align-items: flex-end; /*从末尾位置对齐 */
align-items: center; /*交叉轴居中对齐 */
align-items: baseline; /*基线对齐*/
align-items：stretch; /*拉伸 （默认）*/
}
换行flex-wrap
这个属性有两个参数，一个nowrap，一个wrap，前面是不换行，后面是可以换行，不换的话，如果子元素总宽度超过父元素会进行压缩。默认是不换行的
.father{
display：flex;
flex-wrap:wrap;
}
设置子元素样式
order用于显示顺序，值越小越靠前，参数为正数，默认值为0。
flex-shrink 默认值1 值是正数 再主轴方向溢出时进行收缩盒子-溢出盒子因子
flex-grow 默认0，扩张因子，在主轴还有剩余空间时进行扩张
align-self 项目在交叉轴的对齐方式相当于align-items，只不过只作用于单个项目
下面是完整的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 800px;
height: 900px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
/* 主轴方向 flex-direction*/
flex-direction: row; /* 默认 水平向右 */
/* flex-direction: row-reverse; 水平向左 */
/* flex-direction: column; 垂直向下 */
/* flex-direction: row-reverse; 垂直向上 */
/* 主轴元素排列方式 justify-content*/
/* justify-content: flex-start; */ /* 从开始位置排列*/
/* justify-content: flex-end; */ /* 靠末尾排 */
justify-content: center; /* 居中排列 */
/* justify-content: space-around; */ /*对称排列，中间等分，两边留中间的半 */
/* justify-content: space-between; */ /* 等分排列，两边不留边距 */
/* justify-content: space-evenly; */ /* 全等分，开头和末尾间距和中间一样 */
/* 交叉轴排列方式 align-items 用于单行时交叉轴的排列*/
/* align-items: flex-start; */ /*从开始位置对齐 */
/* align-items: flex-end; */ /*从末尾位置对齐 */
/* align-items: center; */ /*交叉轴居中对齐 */
/* align-items: baseline; */
align-items:strecth; /* (默认) 拉伸*/
/* 交叉轴排列方式 align-content 用于多行*/
/* align-content:center ; */
/* align-content: flex-start; */
/* align-content: flex-end; */
align-content: space-between;
/* align-content: space-around; */
/* align-content: space-evenly; */
}
.son1{
width: 200px;
height: 200px;
background-color: aqua;
border: 1px solid red;
}
/* 项目属性
order 默认值0 值是整数 设置项目在主轴上的排列顺序，数字越小越靠前
flex-shrink 默认值1 值是正数 再主轴方向溢出时进行收缩
盒子-溢出*盒子*因子
flex-grow 默认0，扩张因子，在主轴还有剩余空间时进行扩张
align-self 项目在交叉轴的对齐方式
相当于align-items，只不过只作用于单个项目
*/
</style>
</head>
<body>
<div class="father">
<div class="son1">第一个盒子</div>
<div class="son1" style="order: -1;flex-grow: 1; ">第二个盒子</div>
<div class="son1" >第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
<div class="son1">第三个盒子</div>
</div>
</body>
</html>
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
