flex 是 Flexible Box 的缩写,就是弹性盒子布局的意思
在移动端,为了使网页能适应屏幕缩放,我们采用flex的布局方式对盒子进行填充定义
首先,来看一下最简单的布局方式
<style>
div{
width:80px;
height:300px;
background-color:pink;
}
div span{
width:150px;
height:100px;
background-color:purple;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
在传统的布局情况下,我们所定义的盒子无法做到自适应,从而在移动端时,会变得突兀。那么采用flex布局可以改善这一情况,也是我们引用flex布局的意义
原理:flex 弹性(伸缩)布局,我们可以选择任意容器指定flex布局
当盒子中父元素添加flex时 子元素中的 float clear vartical-align等会失效
通常情况下,我们会对父元素添加flex,以此来控制子元素的位置和排列顺序
父项属性:
flex-direction:设置主轴方向
在flex布局中存在主轴、侧轴两个方向 同样叫法还有x、y轴,行和列......
默认情况下 主轴即x轴 侧轴即y轴
在flex中主侧轴可变化,当flex-direction设置主轴后,剩下的就是侧轴,而我们子元素是跟随主轴来排列的
flex-direction:row 默认从左到右排列
flex-direction:row-reverse 从右到左排列
flex-direction:column 从上到下
flex-direction:column-reverse 从下到上
justify-content:设置主轴上子元素的排列方式 ,先确定主轴为哪一个
justify-content:flex-start: 从头部开始
justify-content:flex-end: 从尾部开始
justify-content:center: 居中
justify-content:space-around: 评分剩余空间
justify-content:space-between: 先俩边贴边,在平分空间
flex-wrap:设置子元素是否换行
默认情况下子元素不换行,如果装不下会缩小子元素宽度
flex-wrap:nowrap:默认不换行
flex-wrap:wrap: 换行
align-items:设置侧轴子元素排列(单行),控制Y轴的排列方式
align-items:flex-start: 从头部开始
align-items:flex-end: 从尾部开始
align-items:center: 垂直居中
align-items:stretch: 拉伸(子盒子不要给高度)
align-content:设置侧轴上子元素排列方式(多行,设置子项在侧轴的排列 且只能用于换行
align-content:flex-start: 从头部开始
align-content:flex-end: 从尾部开始
align-content:center: 垂直居中
align-content:space-around: 子项在侧轴平分空间
align-content:space-between: 子项在侧轴分布两头,再平分剩余空间
align-content:stretch: 设置子项元素高度平分父元素高度
flex-flow:是flex-direction flex-wrap属性的符合属性
/*flex-direction:colimn;
flex-wrap:wrap;*/
可等价于
/*flex-flow:column wrap;*/两者效果相同