1。基本认识
父元素设置display:flex;之后子元素的float vertical-align clear属性都将失效
子元素会自动成为容器成员
2,容器的6大属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction决定主轴的方向,垂直或者水平
row :起点左边,水平
row-reverse :起点右边,水平
column :起点上边,垂直
column-reverse :起点下边,垂直
flex-wrap 默认情况下项目排布都是在一条轴线上,此属性决定换行的性质
nowrap:就是默认的,不换行,超出的不显示
wrap:换行,第一行在上边
wrap-reverse:换行,第一行在下边
flex-flow一般情况下是用不上的,此属性是flex-direction属性和flex-wrap属性的组合
默认是row wrap
justify-content定义项目在主轴上的对齐方式
flex-start:也就是默认的左对齐
flex-end右对齐
center居中
space-between两端对齐,项目之间的间隔是相等的
space-around两端对齐居中
align-items定义项目在交叉轴上的对齐方式
flex-start
flex-end
center
stretch
baseline
align-content只针对多根轴线起作用
flex-start
flex-end
center
space-around
spcae-between
3.项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order 规定了项目的排列的顺序 默认是0
flex-grow,和flex类似,决定项目的放大比例,默认是0
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。