CSS中使用Flexbox来达到居中效果的实例
WEB开发者 发布时间：2015-07-15 16:59:00 作者：佚名 
我要评论
我要评论这篇文章主要介绍了CSS中Flexbox来达到居中效果的实例,注意一下IE浏览器中的兼容问题,需要的朋友可以参考下
CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。
CSS Code复制内容到剪贴板
- .Center-Container.is-Flexbox {
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
- -webkit-box-align: center;
- -moz-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- -webkit-box-pack: center;
- -moz-box-pack: center;
- -ms-flex-pack: center;
- -webkit-justify-content: center;
- justify-content: center;
- }
好处：
内容可以是任意高宽，溢出也能表现良好
可以用于各种高级布局技巧
同时注意： 不支持IE8-9
需要在body上写样式，或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题
相关文章
- 这篇文章给大家介绍了三个小节的内容，其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局，有需要的可以参考2016-09-12
- 下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-27
- 骰子布局顾名思义,就是好比骰子的一面最多可以放置9个点,而每个面放置的点数正好就是一个布局的模型图,这里我们就带来CSS3的Flexbox骰子布局的实现及问题讲解:2016-06-27
- 这篇文章主要介绍了基础的CSS3弹性盒Flexbox布局使用实例,文中最后也提到了解决兼容性问题的基本方法,需要的朋友可以参考下2016-04-08
- 这篇文章主要介绍了CSS3的Flexbox布局的简明入门指南,Flexbox在"布局界"可谓风光无限,近来Facebook开源的React Native也采用Flexbox来布局,需要的朋友可以参考下2016-04-08
- 这篇文章主要为大家详细介绍了css使用flexbox布局容器内多元素水平居中的方法，如何使用flexbox布局多元素水平居中？本文为大家进行解答，感兴趣的小伙伴们可以参考一下2016-03-17
- 今天刚学了css3的弹性盒模型，这是一个可以让你告别浮动、完美实现垂直水平居中的新特性。本文主要是总结一下今天所学，有需要的朋友可以参考下2014-10-08
CSS3 Flexbox中flex-shrink属性的用法示例介绍
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下2013-12-30
这篇文章主要介绍了CSS Flexbox的具体用法详解的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-15
最新评论