one
two
three
three
three
four
five
display:flex可以定义弹性盒容器,表示所有元素以块级样式存在
display:inline-flex表示以行内块存在
flex-wrap可以通过换行解决弹性元素溢出问题 有wrap wrap-reverse两个值
flex-direcition可以使弹性元素垂直排列 有:row column row-reverse column-reverse四个值
row,row-reverse主轴横向 改变方向
column,column-reverse主轴竖向 改变方向
wrap,wrap-reverse改变垂轴方向
一共有四种情况
justify-content可以改变弹性元素在主轴上的的对齐方式
align-items可以改变弹性元素在垂轴上的的对齐方式
基线是最大字体的下划线位置的线
align-self单单改变某个弹性元素的垂轴对齐方式
align-content指定多行元素在垂轴上的对齐方式
align-items和align-content的区别是align-items是以弹性元素里的内容为单位,align-content是以一整行弹性元素对齐
order可以安排每一个元素的显示顺序,默认情况下所有元素order为0
当弹性盒容器宽度被写死,元素即将发生溢出时,flex-shrink可以控制每个弹性元素被压缩的比例
flex-shrink默认值为1
当一个元素缩小的不能再小的时候就不会再缩小了
flex-grow可以定义弹性容器有多余空间时,弹性元素该如何放大
flex-grow的默认值为0
flex-basis可以确定弹性元素在主轴上的初始值
flex是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto
弹性元素的特征