flex布局
传统布局与flex布局
传统布局:
- 兼容性好
- 布局繁琐
- 局限性,不能在移动端很好的布局
flex弹性布局:
- 操作方便,布局极为简单,移动端应用广泛
- PC端浏览器支持情况较差
- IE11或更低版本,不支持或仅部分支持
flex布局原理
当我们为父盒子设为flex布局以后,子元素的float,clear和vertical-align属性将失效。
总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
常见属性
常见父属性
- flex-direction:设置主轴的方向
默认的主轴方向为x轴,那么其余的为侧轴
/* 设置主轴we为y轴 */
flex-direcction:column;
- justify-content:设置主轴上的子元素排列方式
/*使用该属性前必须要先确定主轴*/
/* 从尾部排列 */
justify-content:flex-end;
/*子元素居中对齐*/
justify-content:center;
/*平分剩余空间*/
justify-content:space-around;
/*先两边贴边,后分配剩余空间*/
justify-content:space-between;
- flex-wrap:设置子元素是否换行
/* flex布局时,默认的子元素是不换行的,如果要装不开,会所缩小子元素的宽度,放到父元素里面 */
/* 不换行 */
flex-wrap:nowarp;
/* 换行 */
flex-wrap:warp;
-
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
-
align-content:设置侧轴上的子元素的排列方式(多行)
/* 设置子项在侧轴的上的排列方式,并且只能用于子项出现换行的情况(多行),在单行下是没有效果 */
- align-items:设置侧轴上的子元素排列方式(单行)
align-content和align-items的区别
- align-items适用于单行的情况下,只有上对齐,下对齐,居中和拉伸
- align-content适应于换行(多行)的情况下,可以设置上对齐,下对齐,居中,拉伸以及平均分配剩余空间等属性值
总结就是单行找align-items多行找align-content
flex子项属性
- flex 在剩余空间中子项目占的份数
flex:<number>;
- align-self 控制子项在自己侧轴的排列方式
/* align-self属性允许单个项目有与其他项目不一样的对齐方式,
可覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,
如果没有父元素,则等同于stretch */
- order属性 定义子项的排列顺序(前后顺序)
/*数值越小,排列越靠前,默认为零 */
order:0;
实现子元素垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/*弹性布局*/
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/*主轴子元素居中排列*/
justify-content: center;
/*侧轴子元素居中排列*/
align-items: center;
}
div span{
width: 100px;
height: 100px;
background-color: purple;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
效果展示: