flex 弹性布局:
可以让盒子并排显示,
也可以让行内元素转换为行内块元素。
使用:在父盒子上添加属性 display:flex
flex 布局, 使用时要注意 主轴和侧轴的设置,一般情况 默认的主轴为X轴的方向,侧轴为y轴方向。
flex容器 (flex container)
所有子元素自动成为 flex项目(flex item) 简称项目
子元素可横向排列 也可纵向排列
原理:通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
通常使用在移动端
pc端会有兼容性的问题,不同浏览器 不同版本会有不同程度兼容性问题
父元素的属性:
1.flex-direction : 设置主轴方向,默认主轴方向为x轴方向,也可设置y轴为主轴。
row(X轴)(默认的值) row-reverse(X轴倒序排列) column (Y轴) column-reverse(Y轴倒序排列)
2.justify-content : 设置主轴上子元素的排列方式 , 使用前先确定好主轴方向。
flex-start (从左上角排列) flex-end(从后面排列) center (中心排列) space-around (左右相同的边距排列) space-between(两边顶边排列)(常用)
3.flex-wrap : 设置子元素是否换行, 布局中默认不换行。
nowrap(不换行) wrap(换行)
4.align-items : 设置侧轴上的子元素排列方式(单行)。
flex-start flex-end center stretch(伸展,填充父元素盒子的高度,宽度不变)(使用时 子项目不设置高度,使用较少)
5.align-content : 设置侧轴上的子元素排列方式(多行),有换行时使用。
flex-start flex-end center space-around space-between stretch
6.flex-flow: 复合属性,相当于同时设置了 flex-direction 和 flex-wrap。
子元素的属性
flex: 子项目占的份数,定义子项目分配剩余空间,用flex来表示占多少份。
flex : 拥有3个值。
子项目所在剩余空间中 占的份数。
align-self : 控制子项目在侧轴的排列方式。
flex-start flex-end center stretch
order: 定义子项目的排列顺序(前后顺序),默认为0,数值越小 排列越靠前。