React Blocks
React Blocks
Just the layout, no more, no less.
React blocks uses a declarative approach to build complex layouts on top of CSS Flexbox. Flexbox properties are exposed as attributes on a higher-level react component. Supports media-queries via predefined mobile-first queries. Further custom media queries can be specified in a styles object.
Please note, it does NOT handle mising browser features. Please use Modernizr with Polyfills to achieve that.
Test code
Horizontal and Vertical Layout
When a block component includes the layout attribute, it can become a flex container. You can specify horizontal or vertical to change the orientation
Layout direction can be mirrored with the reverse attribute.
By default, every block container has flexWrap property set to wrap.
Further the styles object would look as shown below.
Flexible children
Children of an element using the layout styles can use flex style to control their own sizing. For example.
The same is true for children of vertical elements.
Note: For vertical layouts, the container needs to have a height for the children to flex correctly.
Alignment: Cross-axis
By default, children stretch to fit the cross-axis (e.g. vertical stretching in a horizontal layout).
Children can be aligned across the cross-axis by adding align attribute and setting it to start, center or end.
Justification: Main-axis
Justification controls the content position in the main axis. Use the justify attribute and set it to start, center, end, between or around. By default justify is set to start.
Centered (Cross-axis & Main-axis)
Further more, an item in a flex-container can be aligned and justified using the centered attribute.
Self Alignment
Alignment can also be set per-child (instead of using the layout containers rules). By default, self alignment is set to stretch.
Nested Blocks (example of a complex layout)
Blocks can further be nested. Below shown is an example of a complex layout built using blocks. Check out the source code here.
Github page built using React and Blocks :)
MIT © whoisandie
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
2020-12-29 js将手机号中间四位变成*号
2020-12-29 取出字符串中的所有数字
2020-12-29 js中字节B转化成KB,MB,GB
2020-12-29 数组去重的几种方法
2020-12-29 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等
2020-12-29 jQuery滚动条回到顶部或指定位置