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

y1chuan 发布于2019-06-28 16:52 / 2561人阅读

摘要：目前移动端的布局也都是用。弹性盒或，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。

felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。这篇文章主要介绍了移动端优先的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: flex 和 flex-wrap: wrap
2.  通过 flex 来调整子元素上的空间分配(扩展、收缩比例和伸缩基准值)
3.  通过 order 来调整子元素的显示顺序(把 .center 放在中间)

例子

CSS

`.box {`
`display``: flex;`
`flex-wrap: wrap;`
`text-align``:` `center``;`
`}`
}//欢迎加入全栈开发交流划水交流圈：582735936
]//面向划水1-3年前端人员
}   //帮助突破划水瓶颈，提升思维能力
`.``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``;`
`}`
}//欢迎加入全栈开发交流划水交流圈：582735936
]//面向划水1-3年前端人员
}   //帮助突破划水瓶颈，提升思维能力
`.``left` `{`
`order:` `1``;`
`}`
`.``right` `{`
`order:` `3``;`
`}`
`}`
 |

HTML

`<``div` `class``=``"box"``>`
`<``div` `class``=``"center"``>`

弹性盒子是 CSS3 的一种新的布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

``
`<``div` `class``=``"left"``>left`
`<``div` `class``=``"right"``>right`
``

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

GPU云服务器云服务器移动端布局三栏布局 web移动端布局 html5 三栏布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/27602.html

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

摘要：目前移动端的布局也都是用。弹性盒或，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。 felxbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。这篇文章主要介绍了移动端优先...

leon 2019-08-23 13:52 评论0 收藏0
移动端优先的flex三栏布局

摘要：弹性盒或，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列对齐和分配空白空间。默认情况下先显示移动端，通过 @media 属性适配屏幕变化使用flexbox相关的CSS属性 display: flex; (父元素) flex-wrap: nowrap | wrap | ...

junbaor 2019-08-29 17:06 评论0 收藏0
圣杯布局和双飞翼布局

摘要：参考文章同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局实现的效果主要在中，和固定宽度，首先渲染，且自适应宽度。 ps: 参考文章 DotHide同学的关于圣杯布局，圣杯布局和双飞翼布局的区别经典布局圣杯布局 showImg(https://segmentfault.com/img/remote/1460000015851268?w=682&h=247); #hea...

ZweiZhao 2019-08-29 16:13 评论0 收藏0
CSS布局说——可能是最全的

摘要：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。这些相对于布局来说是基础的，同时也是非常重要的。可以看到，浮动元素，其实对于布局来说，是特别危险的。前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思...

hearaway 2019-08-30 15:53 评论0 收藏0