Flexbox
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http://www.w3cplus.com/css3/flexbox-basics.html flexbox优点: 1 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行; 2 可以快速让他们布局在一列; 3 可以方便让他们对齐容器的左、右、中间等; 4 无需修改结构就可以改变他们的显示顺序; 5 如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。 注意,设为Flex布局以后,子元素的 footer?{display:?flex;flex-flow:?row?wrap;}
flex-flow:?flex-direction(伸缩流的方向)和flex-wrap(伸缩行换行)
flex-direction:row、row-reverse、column、column-reverse
flex-wrap:nowrap、wrap、wrap-reverse
设置flexbox子元素(伸缩项目)的对齐:侧轴(垂直)对齐伸缩项目----align-items:flex-start/baseline(项目的第一行文字的基线对齐)、flex-end、center、stretch 等同于 align-self
主轴对(水平)齐伸缩项目----justify-content:flex-start、flex-end、space-between、space-around
伸缩项目堆栈伸缩航----align-content:flex-start、flex-end、center、space-between、space-around、stretch
改变元素布局顺序:order:flex-grow、flex-shrink、flex-basis; flex-grow为数值?数值取值越大,越排在后面。并且order可以取负值 ? ?flex:1; flex-basis为数值+宽度 ? ?flex:1 200px; flex-shrink称为收缩比率,这个值只有伸缩项目在没主轴方向溢出伸缩容器才会发挥作用. flex:1 2 600px
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |