资讯专栏INFORMATION COLUMN

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

leon / 3556人阅读

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

felxbox布局是css3里新出的一个,它就是为了解决上述两种方式的不足出现的,是比较完美的一个。目前移动端的布局也都是用flexbox。 这篇文章主要介绍了移动端优先的flex三栏布局的使用方法,感兴趣的小伙伴们可以参考一下

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

使用flexbox相关的CSS属性

</>复制代码

  1. 1. display: flex; (父元素)
  2. 2. flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出该如何显示)
  3. 3. flex: flex-grow flex-shrink flex-basis; (子元素, 子元素该如何分配空间)
  4. 4. order: number; (子元素, 子元素的顺序该如何排列)

重点

</>复制代码

  1. 1. 在父元素上设置 display: flex 和 flex-wrap: wrap
  2. 2. 通过 flex 来调整子元素上的空间分配(扩展、收缩比例和伸缩基准值)
  3. 3. 通过 order 来调整子元素的显示顺序(把 .center 放在中间)

例子

CSS

</>复制代码

  1. `.box {`
  2. `display``: flex;`
  3. `flex-wrap: wrap;`
  4. `text-align``:` `center``;`
  5. `}`
  6. }//欢迎加入全栈开发交流划水交流圈:582735936
  7. ]//面向划水1-3年前端人员
  8. } //帮助突破划水瓶颈,提升思维能力
  9. `.``center` `{`
  10. `background-color``:` `#f00``;`
  11. `flex:` `100%` `1``;`
  12. `}`
  13. `.``left``, .``right` `{`
  14. `flex:` `100%` `1``;`
  15. `}`
  16. `.``left` `{`
  17. `background-color``:` `#0f0``;`
  18. `}`
  19. `.``right` `{`
  20. `background-color``:` `#00f``;`
  21. `}`
  22. `@media` `all` `and (``min-width``:` `400px``) {`
  23. `.``left``, .``right` `{`
  24. `flex:` `50%` `1``;`
  25. `}`
  26. `}`
  27. `@media` `all` `and (``min-width``:` `800px``) {`
  28. `.box {`
  29. `flex-wrap:` `nowrap``;`
  30. `}`
  31. `.``center` `{`
  32. `order:` `2``;`
  33. `flex:` `1``;`
  34. `}`
  35. `.``left``, .``right` `{`
  36. `flex:` `0` `0` `300px``;`
  37. `}`
  38. }//欢迎加入全栈开发交流划水交流圈:582735936
  39. ]//面向划水1-3年前端人员
  40. } //帮助突破划水瓶颈,提升思维能力
  41. `.``left` `{`
  42. `order:` `1``;`
  43. `}`
  44. `.``right` `{`
  45. `order:` `3``;`
  46. `}`
  47. `}`
  48. |

HTML

</>复制代码

  1. `<``div` `class``=``"box"``>`
  2. `<``div` `class``=``"center"``>`

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

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

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

</>复制代码

  1. ``
  2. `<``div` `class``=``"left"``>left`
  3. `<``div` `class``=``"right"``>right`
  4. ``

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

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

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

相关文章

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

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

    y1chuan 评论0 收藏0
  • 移动优先flex三栏布局

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

    junbaor 评论0 收藏0
  • 圣杯布局和双飞翼布局

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

    ZweiZhao 评论0 收藏0
  • CSS布局说——可能是最全

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

    hearaway 评论0 收藏0

发表评论

0条评论

leon

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<