移动端的flex三栏布局的相关知识介绍(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于移动端的flex三栏布局的相关知识介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

默认情况下先显示移动端,通过 @media 属性适配屏幕变化

使用flexbox相关的CSS属性

  1. display: flex; (父元素)

  2. flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出该如何显示)

  3. flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该如何分配空间)

  4. order: number; (子元素, 子元素的顺序该如何排列)

重点

  1. 在父元素上设置 display: flexflex-wrap: wrap

  2. 通过 flex 来调整子元素上的空间分配(扩展、收缩比例和伸缩基准值)

  3. 通过 order 来调整子元素的显示顺序(把 .center 放在中间)

例子

CSS

    .box {         display: flex;         flex-wrap: wrap;         text-align: center;     }     .center {         background-color: #f00;         flex: 100% 1;     }     .left, .right {         flex: 100% 1;     }     .left {         background-color: #0f0;     }     .right {         background-color: #00f;     }     @media all and (min-width: 400px) {         .left, .right {             flex: 50% 1;         }     }     @media all and (min-width: 800px) {         .box {             flex-wrap: nowrap;         }         .center {             order: 2;             flex: 1;         }         .left, .right {             flex: 0 0 300px;         }         .left {             order: 1;         }         .right {             order: 3;         }     }

HTML

<div class="box">     <div class="center">         弹性盒子是 CSS3 的一种新的布局模式。         CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。         引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。     </div>     <div class="left">left</div>     <div class="right">right</div> </div>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 移动端的flex三栏布局的相关知识介绍(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情