弹性布局
父级元素
display:flex(用了弹性布局,无需用float)
父级其他属性:
-
justify-content: 子元素水平排列方式
(center 居中; space-between 两端对齐; space-around 拉手分布; flex-start 居左; flex-end 居右) -
alige-items 单行子元素垂直排列
(center 居中; flex-start 居左; flex-end 居右) -
align-content 多行子元素垂直排列
(center 居中; flex-start 居左; flex-end 居右) -
flex-direction 排列方式
(row 横向排列; row-reverse 横向翻过排列; column 纵向排列; column-reverse 纵向翻过排列) -
flex-wrap 子元素是否在一行显示
(wrap 换行; no-wrap 不换行)
子级身上属性:
-
flex:1
【 1指的是一个系数(自适应;子元素在划分父元素宽度,先刨除固定宽度)】 -
flex-grow:1 定义子元素放大比例
-
align-self 其实就是覆盖父级align-items垂直排列
(center 居中; flex-start 居左; flex-end 居右) -
order 规定子元素顺序,用来排序(数值越小。排列越靠前)
注:(若出现border,margin,padding等属性,养成习惯都需要加上box-sizing:border-box)