源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5源码 > 资讯报道 > 网页制作 > 移动端优先的flex三栏布局的使用方法

移动端优先的flex三栏布局的使用方法

作者:yezheng来源:未知浏览:时间:2018-10-31 16:39我要评论
felxbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的,是比较完美的一个。目前移动端的布局也都是用flexbox。 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法,感兴趣的小伙伴们可以参考一下

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

 

使用flexbox相关的CSS属性

•display: flex; (父元素)

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

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

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

 

重点

•在父元素上设置 display: flex 和 flex-wrap: wrap

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

•通过 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>

 

以上就是本文的全部内容,希望对大家的学习有所帮助

 

相关文章
网友对“移动端优先的flex三栏布局的使用方法”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话