父级:
display:flex
如果父级用了弹性布局,子元素就 不需要float了
父级上的其它属性:
justify-content:子元素水平排列方式
center 居中
space-between 两端对齐
space-around 每个子元素拉手分布
flex-start 左
flex-end 右
align-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-flow:flex-direction和flex-wrap的简写
子级:
flex:1 平分父级的宽度
flex:grow 让换行的子元素(假如两个),占满新的一行。放大
align-self:自己的单独的,用来覆盖父级的
order 子元素顺序 数值越小越靠前
例子