flex

来源:互联网 发布:淘宝店怎么上传宝贝 编辑:程序博客网 时间:2024/05/29 18:37

flex-direction:row 子元素要设置width或flex;若只设width未设flex,父元素宽度不够,且默认不换行,则子元素按比例显示,子元素只被调整宽度,未设高度则填充;
flex-direction:column 同样
flex优先级高于width\height

若flex-direction:column align-items:center 才能实现左右居中
若要实现多行展示图片之类,就不能给每个图片设置flex:n;只能设置固定宽度/另一种就是flex:1 1 n%;

display:-webkit-flex
-webkit-flex-wrap //nowrap(default)/wrap/wrap-reverse
flex-direction //row(default) /row-reverse/ column /column-reverse
flex-flow //flex-direction -webkit-flex-wrap
justify-content //flex-start/flex-end/center/space-between/space-around
align-self //flex-start/flex-end/center
align-items //flex-start/flex-end/center/baseline/stretch
order //number 排序
align-content //flex-start/flex-end/center/space-between/space-around/stretch

0 0