几个CSS3的flex弹性盒模型布局的简单例子演示
qiangck 发布时间:2016-05-12 12:00:09 作者:qiangck 我要评论
这篇文章主要介绍了几个CSS3的flex弹性盒模型布局的简单例子演示,flex布局是迄今为止最强大的web布局方式,需要的朋友可以参考下
Flexible Box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。
XML/HTML Code复制内容到剪贴板
- <div class="warp">
- <div class="modular">1</div>
- <div class="modular">2</div>
- <div class="modular">3</div>
- <div class="modular">4</div>
- </div>
display:flex和display:box有什么区别?
前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。
CSS Code复制内容到剪贴板
- /*父级*/
- .warp{
- width: 100%;
- height: 100px;
- /*这个是用来定义伸缩容器,是内联还是块取决于设置的值。*/
- /*这个时候,他的所有子元素将变成flex文档流,称为伸缩项目。*/
- /*-------------------------------------------------------------*/
- display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
- display: -moz-box; /* Firefox 17- */
- display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
- display: -moz-flex; /* Firefox 18+ */
- display: -ms-flexbox; /* IE 10 */
- display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
- /*-------------------------------------------------------------*/
- /*一起使用box-align 和 box-pack 属性,对子元素进行居中*/
- -webkit-box-pack:justify;
- -webkit-box-align: ustify;
- -moz-box-pack:justify;
- -moz-box-align:justify;
- box-pack:justify;
- box-align:justify;
- /*-------------------------------------------------------------*/
- /*定义了伸缩项目放置在伸缩容器的方向*/
- flex-direction:row;
- -webkit-flex-direction:row;
- /*定义伸缩容器里是单行还是多行显示*/
- flex-wrap:nowrap;
- /*flex-direction”和“flex-wrap”属性的缩写版本,默认row nowrap*/
- flex-flow:row nowrap;
- /*设置伸缩容器在横向方向上的对齐方式。*/
- justify-content:center;
- /*设置伸缩容器在纵向方向上的对齐方式。*/
- align-items:center;
- /*当伸缩容器的纵向还有多余空间时,可以用来调准伸缩容器横向在伸缩容器里的对齐方式*/
- align-content:center;
- }
- /*子级*/
- .warp .modular{
- width:80px;
- height:80px;
- background-color:#eee;
- text-align:center;
- /*设置伸缩项目出現的順序。*/
- order:-1;
- /*设置伸缩项目扩展的比例。*/
- flex-grow:1;
- /*设置伸缩项目收缩的比例。*/
- flex-shrink:2;
- /*设置伸缩项目的伸缩基准值。*/
- flex-basis:auto;
- /*flex-grow”、“flex-shrink”和“flex-basis”三个属性的缩写*/
- flex:1 2 100px;
- /*用来在单独的伸缩项目上覆写默认的对齐方式。*/
- align-self:center;
- }
直接上代码,写了个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 Code复制内容到剪贴板
- <style type="text/css">
- .nav{
- background:#00BFFF;
- display:-webkit-box;
- display:-moz-box;
- display:-ms-flexbox;
- display:-webkit-flex;
- display:flex;
- -webkit-flex-flow:row wrap;
- /*自适应竖向排列*/
- -webkit-flex-flow:column wrap;
- /* 所有列面向主轴起始位置靠齐 */
- justify-content:flex-start;
- /* 所有列面向主轴终点位置靠齐 */
- justify-content:flex-end;
- }
- .nav a{
- text-decoration:none;
- display:block;
- padding:1em;
- color:#fff;
- /*居中平铺*/
- flex:1;
- }
- @media all and (max-width: 800px) {
- .nav{
- /* 所有列面向主轴两端位置平均分配 */
- justify-content:space-around;
- }
- }
- </style>
XML/HTML Code复制内容到剪贴板
- <ul class="nav">
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- <li><a href="#">4</a></li>
- </ul>
例:移动端常用自适应布局
CSS Code复制内容到剪贴板
- <style type="text/css">
- .wrapper{
- display:-webkit-box;
- display:-moz-box;
- display:-ms-flexbox;
- display:-webkit-flex;
- display:flex;
- -webkit-flex-flow:row wrap;
- flex-flow:row wrap;
- }
- .wrapper > *{
- padding:10px;
- flex:1 100%;
- }
- .header{
- background:#FF6347;
- }
- .footer{
- background:#90EE90;
- }
- .main{
- background:#00BFFF;
- }
- .aside-1{
- background:#FFD700;
- }
- .aside-2{
- background:#FF69B4;
- }
- @media all and (min-width: 600px) {
- .aside{
- flex:1 auto;
- }
- }
- @media all and (min-width: 800px) {
- .main{
- flex:3 0px;
- }
- .aside-1{
- order:1;
- }
- .main{
- order:2;
- }
- .aside-2{
- order:3;
- }
- .footer{
- order:4;
- }
- }
- </style>
XML/HTML Code复制内容到剪贴板
- <div class="wrapper">
- <header class="header">顶部</header>
- <article class="main">
- <p>我在中间显示的文字</p>
- </article>
- <aside class="aside aside-1">我在左边显示的文字</aside>
- <aside class="aside aside-2">我在右边显示的文字</aside>
- <footer class="footer">底部</footer>
- </div>
相关文章
- 这是一款基于纯CSS3弹性框布局实现的渐变色波动列动画效果源码。画面中的5块渐变色区域连续排列在一起,并呈现出此消彼涨的弹性波动变换动画效果2018-08-07
- 这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-02
CSS3弹性布局内容对齐(justify-content)属性使用详解
这篇文章主要介绍了CSS3弹性布局内容对齐(justify-content)属性使用详解,具有一定的参考价值,有兴趣的可以了解一下2017-07-31- 这篇文章主要为大家详细介绍了CSS3弹性伸缩布局之box布局,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-07-12
- flex布局毫无疑问是当今Web页面的最强大布局方式,box-flex弹性盒模型是其中的一个代表,这里我们就来以实例讲解CSS3中的box-flex弹性盒模型布局2016-06-09
- 下面小编就为大家带来一篇CSS3弹性盒模型flex box快速入门心得(必看篇)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-24
- 这篇文章主要介绍了基础的CSS3弹性盒Flexbox布局使用实例,文中最后也提到了解决兼容性问题的基本方法,需要的朋友可以参考下2016-04-08
- 这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带2013-04-07
- 这篇文章主要介绍了CSS3 Flex 弹性布局实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧2018-11-01
最新评论