flexible box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。
display:flex和display:box有什么区别?
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
直接上代码,写了个demo便于理解,其中warp为父元素,称为“伸缩容器,modular为子元素,称为“伸缩项目”。
1) flexbox布局最适合应用程序的组件和小规模的布局,而网格布局更适合那些更大规模的布局。
2) 目前没有浏览器支持 box-flex 属性,firefox 支持替代的 -moz-box-flex 属性,safari、opera 以及 chrome 支持替代的 -webkit-box-flex 属性。
3) css的columns在伸缩容器上没有效果。
4) float、clear和vertical-align在伸缩项目上没有效果。
例:移动端导航(居中,左右,自适应居中,自适应竖向排列)
例:移动端常用自适应布局
如对本文有疑问, 点击进行留言回复!!
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo(linear-gradient())
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论