一、什么是flex弹性布局
- flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
为盒子模型提供更大的灵活性,任何一个容器都可以指定flex布局。 - 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
- 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。【图片参考自https://www.runoob.com/w3cnote/flex-grammar.html】
- 布局原理:通过给父盒子添加flex属性,控制子盒子的位置和排列方式。
- 特性:
·flex不分块级元素、行内元素、行内块元素
·父盒子设为flex布局后,子元素的float、clear、vertical-align属性消失
·子容器可以横向排列,也可以纵向排列 - 对比
·传统布局:兼容性好;布局繁琐,不能在移动端很好的布局。
·flex弹性布局:操作方便,布局简单,移动端应用广泛;PC端浏览器支持情况较差。
二、flex弹性布局常见属性
- 父元素的6个属性:
flex-direction:主轴的方向
flex-wrap:子元素是否换行
flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
justify-content:主轴上子元素的排列方式
align-content:侧轴上的子元素排列方式(多行)
align-items:侧轴上的子元素排列方式(单行)
div {
/* 父元素布局方式设置为flex */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 【默认】,默认从左往右,若翻转后row-reverse从右往左 */
flex-direction: row;
/* 设置列为主轴,默认从上到下,若翻转后column-reverse从下到上 */
flex-direction: column;
/* 默认子元素是不换行的。如果装不开会缩小子元素的宽度,放到父元素里面 */
flex-wrap: nowrap;
/* 设置为可以换行 */
flex-wrap: wrap;
/* 同时设置主轴方向、是否换行/列 */
flex-flow: column wrap;
/* 主轴子元素从头部开始排列【默认】*/
justify-content: flex-start;
/* 主轴子元素从尾部开始排列 */
justify-content: flex-end;
/* 主轴子元素居中对齐 */
justify-content: center;
/* 主轴子元素平分剩余空间 */
justify-content: space-around;
/* 主轴子元素先两边贴边,再分配剩余的空间 */
justify-content: space-between;
/* (单行)侧轴子元素从头部开始排列 */
align-items: flex-start;
/* (单行)侧轴子元素从尾部开始排列 */
align-items: flex-end;
/* (单行)侧轴子元素居中 */
align-items: center;
/* (单行)侧轴子元素拉伸【默认】但子元素不要给高度 */
align-items: stretch;
/* (单行)侧轴子元素基线对齐 */
align-items: baseline;
/* (多行)侧轴子元素从头部开始排列 */
align-content: flex-start;
/* (多行)侧轴子元素从尾部开始排列 */
align-content: flex-end;
/* (多行)侧轴子元素居中 */
align-content: center;
/* (多行)侧轴子元素平分剩余空间 */
align-content: space-around;
/* (多行)侧轴子元素两边贴边,再平分剩余空间 */
align-content: space-between;
}
- 子元素的6个属性:
flex:分配剩余空间,子元素占的份数
align-self:子项自己在侧轴独特的排列方式,可覆盖align-items属性
order:子项的排列顺序,默认为0,数值越小越靠前
flex-grow:子项的放大比例,默认为0,不放大
flex-shrink:子项的缩小比例,默认为1,空间不足时自动缩小
flex-basis:计算子项占据的主轴空间。浏览器可以根据这个属性,计算主轴是否有多余空间。
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
<style>
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
/* 第2个占2份,其他的占1份 */
flex: 2;
background-color: purple;
}
</style>
div span:nth-child(2) {
/* 默认是0,-1比0小,所以能排在前面 */
order: -1;
}
div span:nth-child(3) {
/* 只让3号盒子下来 */
align-self: flex-end;
}
三、(补充)背景线性渐变
<style>
div {
width: 600px;
height: 200px;
/* 背景渐变必须添加浏览器私有前缀!! */
background: -webkit-linear-gradient(left, red, blue);
/* 默认是top 从上往下渐变 */
background: -webkit-linear-gradient(red, blue);
/* 设置从左上开始渐变 */
background: -webkit-linear-gradient(top left, orange, blue);
}
</style>
四、flex弹性布局缺点
浏览器兼容性比较差,只能兼容到ie9及以上。