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

View on Github

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

Alpha
Beta
Gamma
Delta

Layout direction can be mirrored with the reverse attribute.

Alpha
Beta
Gamma
Delta

By default, every block container has flexWrap property set to wrap.

Further the styles object would look as shown below.

Alpha
Beta
Gamma
Delta

Flexible children

Children of an element using the layout styles can use flex style to control their own sizing. For example.

Alpha
Beta
Gamma

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.

Alpha
Beta
Gamma

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.

Start
Centered
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.

Alpha
Beta
Gamma
Alpha
Beta
Gamma
Alpha
Beta
Gamma
Alpha
Beta
Gamma
Alpha
Beta
Gamma

Centered (Cross-axis & Main-axis)

Further more, an item in a flex-container can be aligned and justified using the centered attribute.

Centered

Self Alignment

Alignment can also be set per-child (instead of using the layout containers rules). By default, self alignment is set to stretch.

Alpha
Beta
Gamma
Delta

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.

Brand
Searchbar
Navigation
Categories
Settings
Dashboard Graph
Widget
Widget
Widget
Dashboard Content
Footer

Github page built using React and Blocks :)

MIT © whoisandie

posted on   漫思  阅读(3)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.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滚动条回到顶部或指定位置

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示