Layout toolkit
Fower provides a powerful Flexbox-based layout toolkit. By adjusting the direction and alignment of the layout, you can build most of the layout and make the layout easier.
Compared with the traditional flex layout, the layout of Fower is more abstract and streamlined. The layout of Fower is abstracted as toCenter, toCenterX, toCenterY, toLeft, toTop, toRight, toBottom, toBetween , toEvenly, toAround ten kinds of atomic alignment, you can forget the concept of main axis and cross axis in traditional flex layout when you use them, you only need to have a sense of direction.
Compare to Flexbox
Fower Layout base on Flexbox, Compare to Flexbox, it has several advantages:
- Less Api: You don't have to memorize all the APIs of Flexbox, just to remember 10 Atomic Props:
toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround. - Easy to learn: It's more intuitive，lower mental burden. No need to understand main axis and cross axis.
Core Concept
Direction：row、column。
Alignment：toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottom、toBetween、toEvenly、toAround。
Live Demo
Layout base on row
All Alignment Props with row direction:
Layout base on column
All Alignment Props with column direction:
Compose base on toLeft
All Layout compose with toLeft:
Compose base on toRight
All Layout compose with toRight:
Compose base on toTop
All Layout compose with toTop:
Compose base on toBottom
All Layout compose with toBottom:
Compose base on toCenterX
All Layout compose with toCenterX:
Compose base on toCenterY
All Layout compose with toCenterY:
Compose base on toBetween
All Layout compose with toBetween:
Compose base on toEvenly
All Layout compose with toEvenly:
Compose base on toAround
All Layout compose with toAround: