10分钟学会基本的 Flexbox 布局

作者 : 开心源码 本文共344个字,预计阅读时间需要1分钟 发布时间: 2022-05-12 共63人阅读

什么是 Flexbox ?

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设施下可预测地展示出来。

它之所以被称为 Flexbox ,是由于它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可使用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

什么情况下不建议用 Flexbox ?

尽管 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免用 Flexbox 布局:

  • 整体页面布局
  • 完全支持旧浏览器的网站

浏览器支持 Flexbox 的情况:

10分钟学会基本的 Flexbox 布局

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 10分钟学会基本的 Flexbox 布局

发表回复