首页 > 作文

几个CSS3的flex弹性盒模型布局的简单例子演示

更新时间:2023-04-06 23:20:30 阅读: 评论:0

flexible box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。

xml/html code
复制内容到剪贴板

<divclass=“warp”><divclass=“modular”>1</div><divclass=“modular”>2</div><divclass=“modular”>3</div><divclass=“modular”>4</div></div>

display:flex和display:box有什么区别?

前者是flex 2012年的语法,也将是以后标准的语法,大部分浏览器已经实现了无前缀版本。

css code
复制内容到剪贴板

/*父级*/.warp{ width:100%; height:100px; /*这个是用来定义伸缩容器,是内联还是块取决于设置的值。*//*这个时候,他的所有子元素将变成flex文档流,称为伸缩项目。*//*————————————————————-*/display:-webkit-box;/*chrome4+,safari3.1,iossafari3.2+*/display:-moz-box;/*firefox17-*/display:-webkit-flex;/*chrome21+,safari6.1+,iossafari7+,opera15/16*/display:-moz-flex;/*firefox18+*/display:-ms-flexbox;/*ie10*/display:flex;/*chrome29+,firefox22+,ie11+,opera12.1/17/18,android4.4+*//*———&学习日语机构#8212;————————————————-*//*一起使用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; /*——————————————五颗豌豆212;—————-*//*定义了伸缩项目放置在伸缩容器的方向*/flex-direction:row; -webkit-flex-direction:row; /*定义伸缩容器里是单行还是多行显示*/flex-wrap:nowrap; /*flex-direction”和“flex-wrap”属性的缩写版本,默认rownowrap*/flex-flow:rownowrap; /*设置伸缩容器在横向方向上的对齐方式。*/justifycborn的过去式ontent: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:12100px; /*用来在单独的伸缩项目上覆写默认的对齐方式。*/align-lf: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
复制内容到剪贴板

<styletype=“text/css”> .nav{ background:#00bfff; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:rowwrap; /*自适应竖向排列*/-webkit-flex-flow:columnwrap; /*所有列面向主轴起始位置靠齐*/justifycontent:flex-start; /*所有列面向主轴终点位置靠齐*/justifycontent:flex-end; } .nava{ text-decoration:none; display:block; padding:1em; color:#fff; /*居中平铺*/flex:1; } @mediaalland(max-width:800px){ .nav{ /*所有列面向主轴两端位置平均分配*/justifycontent:space-around; } } </style>

xml/html code
复制内容到剪贴板

<ulclass=“nav”><li><ahref=“#”>1</a></li><li><ahref=“#”>2</a></li><li><ahref=“#”>3</a></li><li><ahref=“#”>4</a></li></ul>

例:移动端常用自适应布局

css code
复制内容到剪贴板

<styletype=“text/css”> .wrapper{ display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-flex-flow:rowwrap; 入党介绍人意见flex-flow:rowwrap; } .wrapper>*{ padding:10px; flex:1100%; } .header{ background:#ff6347; } .footer{ background:#90ee90; } .main{ background:#00bfff; } .aside-1{ background:#ffd700; } .aside-2{ background:#ff69b4; } @mediaalland(min-width:600px){ .aside{ flex:1auto; } } @mediaalland(min-width:800px){ .main{ flex:30px; } .aside-1{ order:1; } .main{ order:2; } .aside-2{ order:3; } .footer{ order:4; } } </style>

xml/html code
复制内容到剪贴板

<divclass=“wrapper”><headerclass=“header”>顶部</header><articleclass=“main”><p>我在中间显示的文字</p> </article><asideclass=“asideaside-1”>我在左边显示的文字</aside><asideclass理论学习的重要性=“asideaside-2”>我在右边显示的文字</aside><footerclass=“footer”>底部</footer></div>

本文发布于:2023-04-06 23:20:28,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/d32248cfcb77f0e574f9833984e83693.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:几个CSS3的flex弹性盒模型布局的简单例子演示.doc

本文 PDF 下载地址:几个CSS3的flex弹性盒模型布局的简单例子演示.pdf

标签:伸缩   剪贴板   容器   项目
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图