基础的CSS3弹性盒Flexbox布局使用实例
前端  /  管理员 发布于 7年前   220
flexbox是一个新的盒子模型,当你给一个元素使用了flexbox模块,那么它的子元素就会指定的方向在水平或者纵向方向排列。这些子元素会按照一定的比例进行扩展或收缩来填补容器的可用空间。flexbox有许多很好用的地方,下面就着重讲述一下它的一些使用场景:
Example 1: flexbox等分布局
如果你要实现以下所示的样式,你可能首先想到的是用float:
但当只有2个排名后,少了一个li节点后,就会展示如下:
删除两个li节点后如下:
但是用户以及设计师肯定不希望看到这样的界面。他们肯定希望界面是这样的:
减少一个li节点后:
删除两个li节点后如下:
那么这里用display:flex布局是最好不过的了,新的flexbox布局模式被用来重新定义CSS中的布局方式:
CSS Code复制内容到剪贴板
可见用flex布局非常完美,这就是flex布局的牛逼之处。很遗憾的是最近规范变动过多,导致各个浏览器对它的实现也有所不同。为了兼容更多的浏览器,也可以这样写:
display: flex;display: -webkit-box;这两个属性的方法作用相同。
Example 2: flexbox不等分布局
效果如下图所示:
Example 3: flexbox基本页面布局
CSS Code复制内容到剪贴板效果如下图所示:
Example 4: flexbox的居中布局
CSS Code复制内容到剪贴板PS:解决兼容性问题
对于Flexbox 以前的几个版本可以使用Autoprefixer后处理程序来实现css3代码自动补全。比如:
编译后:
CSS Code复制内容到剪贴板如果你使用Sass,那么可以使用@mixin来解决flexbox版本兼容,直接@include进来就可以轻松解决三个版本的兼容问题;这样可以支持到IE10 +, 移动端浏览器和最新的FF, Safari, Chrome, IE11, Opera等。
github项目地址:sass-flex-mixin
122 在
学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
Copyright·© 2019 侯体宗版权所有·
粤ICP备20027696号