Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。
您可能感兴趣的相关文章
Bulma - 基于 Flexbox 的现代化的 CSS 框架
2017-04-17
1137
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
Bulma 是一个基于 Flexbox 的现代化的 CSS 框架，设计的初衷就是移动优先（Mobile First），模块化设计，可以轻松用来实现各种简单或者复制的内容布局，浏览器支持：浏览器支持：Chrome、Edge、Firefox、Internet Explorer (10+)、Opera 以及 Safari。
目录
相关文章
|
2月前
|
前端开发
架构师
容器
CSS Flexbox与Grid：构建响应式布局的艺术
本文介绍了Flex弹性布局和Grid网格布局。Flex布局中，`display: flex`开启布局，`flex-direction`定义主轴方向，`flex-wrap`控制换行，`justify-content`和`align-items`分别调整主轴和交叉轴对齐。Grid布局中，`display: grid`开启布局，`grid-template-columns/rows`定义网格轨道，`grid-gap`设置间距。两者结合可创建复杂响应式布局。选择Flexbox处理一维布局，Grid则适合二维布局。
33
0
0
|
2月前
|
前端开发
|
9天前
|
前端开发
|
14天前
|
前端开发
容器
|
29天前
|
前端开发
开发者
容器
CSS进阶-Flexbox高级布局技巧
【6月更文挑战第16天】Flexbox是CSS3的布局模块，简化响应式设计和复杂多列布局。文章探讨了Flex容器与项目属性的区分、垂直居中、防止元素溢出等常见问题及解决方案。此外，还分享了等宽不同高列、圣杯布局和自适应间距等高级技巧。通过示例展示了如何创建垂直居中布局，强调实践和理解核心概念是掌握Flexbox的关键。
29
10
10
|
1月前
|
前端开发
开发者
容器
CSS基础-Flexbox布局基础
【6月更文挑战第11天】Flexbox是CSS3的全新布局模式，简化了网页动态布局问题。通过`display: flex`设置容器，调整`flex-direction`、`justify-content`、`align-items`等属性控制项目排列和对齐。适用于响应式布局、均匀分布空间和元素对齐。注意浏览器兼容性、选择合适布局模式及区分对齐与排序属性。通过实例代码学习和实践，掌握Flexbox能有效提升网页布局效率。
25
3
3
|
1月前
|
前端开发
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影二
23
0
0
|
1月前
|
前端开发
容器
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影（一）
Web网页制作-知识点（4）——CSS盒子模型、弹性盒模型（flex box)、文档流、浮动、清除浮动、定位、圆角、阴影一
33
0
0
|
2月前
|
前端开发
开发者
UED
【专栏：HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局，简单易用，适合导航栏和列表；CSS Grid则适用于二维布局，能创建复杂结构，适用于整个页面布局。两者各有优势，在响应式设计中都占有一席之地。随着Web标准发展，它们的结合使用将成为趋势，开发者需掌握两者以应对多样化需求。
54
5
5
|
2月前
|
前端开发
JavaScript
开发者
【专栏：HTML与CSS实践篇】CSS框架（Bootstrap/Foundation）快速上手
【4月更文挑战第30天】Bootstrap和Foundation是两种流行的CSS框架，用于构建响应式网页。它们包含预定义的样式、栅格系统和组件，加速开发流程。Bootstrap以其12列栅格系统闻名，而Foundation提供更定制化和模块化选项。了解并熟练运用这些框架的基本概念和组件，结合最佳实践和性能优化，能帮助开发者高效创建符合现代设计趋势的网页项目。
64
3
3
热门文章
最新文章
1
CSS-弹性布局2-交叉轴
2
16种基于 CSS3 & SVG 的创意的弹窗效果
3
css动画：文字向上移动并逐渐消失 点击按钮显示+1上移淡出
4
css vertical-align:middle来实现垂直居中
5
CSS3 动画一瞥
6
css3-巧用选择器 “:target”
7
《图解CSS3：核心技术与案例实战》——2.3节层次选择器
8
一组带Tooltip提示框的CSS3图标按钮
9
如何用纯 CSS 创作一副国际象棋
10
【CSS】【2】HTML引入CSS的四种方式
1
利用 HBuilderX 设置CSS样式会员注册页面
47
2
实践任务：项目介绍与项目准备+制作网页头部和导航+制作banner和最新更新栏目+制作苹果之家栏目+制作底部版权区域与CSS代码优化+制作Apple独家栏目
19
3
css结构伪类
20
4
web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
35
5
div+css详解
72
6
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
24
7
HTML5/CSS3粒子效果进度条代码
40
8
同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
48
9
CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
21
10
CSS外边距重叠：原理、结果
20