黑松山资源网 Design By www.paidiu.com
Flexible Box(弹性盒子)能让页面的分布更合理和方便,
这是之前使用常规的布局方式所做不到的。
- <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>
- <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>
- <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>
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 魏新雨《为你祈祷+新歌精逊2CD[WAV]
- 影心、明萨拉你选哪个?国外美女COS《博德3》
- 澳洲女子骑车跌入“自杀树”丛 疼痛持续9个月崩溃
- 育碧公布2024“她创力”计划:为女性游戏人提供辅导
- 刘美君.2017-千色·30总选3CD【环球】【WAV+CUE】
- 群星.2022-星河长明电视原声带【乐有奇思】【FLAC分轨】
- 陈淑桦.1995-淑桦盛开Forever【滚石】【WAV+CUE】
- 《再来一张》评测:出师成败皆系“赌”
- 《银河汉堡店》测评:我是银河走菜王!
- 《末日地带2》评测:酣畅淋漓的“和面”之旅
- 萧煌奇《没事的》[320K/MP3][96.22MB]
- 萧煌奇《没事的》[FLAC/分轨][263.38MB]
- 群星《音你而来 第6期》[320K/MP3][90.61MB]
- 交错战线爬塔攻略一览
- 战锤40K星际战士2全近战武器使用教学|近战武器连招表