flex布局第二篇

原创 大喵 随笔 HTML+CSS 184阅读 2018-02-26 11:58:42 举报

1、flex布局概念
四要素:
伸缩容器:父元素含有display:flex属性
伸缩项目:伸缩容器的子元素
主轴:子元素按照主轴进行分布(主轴默认方向:从左往右)
侧轴:默认方向:从上往下
2、设置主轴方向的属性
flex-direction:row(从左往右)/row-reverse(从右往左)/column(从上往下)/column-reverse(从下往上)
3、设置子元素的对齐方式
justify-content:: flex-start(左对齐) | flex-end(右对齐) | center(居中对其,类似margin:0 auto) | space-between(两端对齐,剩下的间隔相等)| pace-around(项目的两侧边距都相等);
4、设置换行属性
flex-wrap:nowrap(不换行) | wrap(换行,从上往下,从左往右) | wrap-reverse(换行,从下往上,从右往左);
5、设置子元素的剩余空间比例
flex属性,子元素全部为flex:1,则每份子元素所占空间相同,如果有一个元素为flex:2,则此元素所占空间为其他flex:1的元素的2倍

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复