Skip to main content

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: toCentertoCenterXtoCenterYtoLefttoToptoRighttoBottomtoBetweentoEvenlytoAround.
  • 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、toBottomtoBetweentoEvenlytoAround

Live Demo

Result
Loading...
Live Editor

Layout base on row

All Alignment Props with row direction:

flex-direction: row
row
toLeft
row
toRight
row
toTop
row
toBottom
row
toCenter
row
toCenterX
row
toCenterY
row
toBetween
row
toEvenly
row
toAround

Layout base on column

All Alignment Props with column direction:

flex-direction: column
column
toLeft
column
toRight
column
toTop
column
toBottom
column
toCenter
column
toCenterX
column
toCenterY
column
toBetween
column
toEvenly
column
toAround

Compose base on toLeft

All Layout compose with toLeft:

Compose base on toLeft
row
toLeft toTop
row
toLeft toCenterY
row
toLeft toBottom
column
toLeft toTop
column
toLeft toCenterY
column
toLeft toBottom
column
toLeft toBetween
column
toLeft toEvenly
column
toLeft toAround

Compose base on toRight

All Layout compose with toRight:

Compose base on toRight
row
toRight toTop
row
toRight toCenterY
row
toRight toBottom
column
toRight toTop
column
toRight toCenterY
column
toRight toBottom
column
toRight toBetween
column
toRight toEvenly
column
toRight toAround

Compose base on toTop

All Layout compose with toTop:

Compose base on toTop
row
toTop toLeft
row
toTop toCenterX
row
toTop toRight
column
toTop toLeft
column
toTop toCenterX
column
toTop toRight
row
toTop toBetween
row
toTop toEvenly
row
toTop toAround

Compose base on toBottom

All Layout compose with toBottom:

Compose base on toBottom
row
toBottom toLeft
row
toBottom toCenterX
row
toBottom toRight
column
toBottom toLeft
column
toBottom toCenterX
column
toBottom toRight
row
toBottom toBetween
row
toBottom toEvenly
row
toBottom toAround

Compose base on toCenterX

All Layout compose with toCenterX:

Compose base on toCenterX
row
toCenterX toTop
row
toCenterX toCenterY
row
toCenterX toBottom
column
toCenterX toTop
column
toCenterX toCenterY
column
toCenterX toBottom
column
toCenterX toBetween
column
toCenterX toEvenly
column
toCenterX toAround

Compose base on toCenterY

All Layout compose with toCenterY:

Compose base on toCenterY
row
toCenterY toLeft
row
toCenterY toCenterX
row
toCenterY toRight
column
toCenterY toLeft
column
toCenterY toCenterX
column
toCenterY toRight
row
toCenterY toBetween
row
toCenterY toEvenly
row
toCenterY toAround

Compose base on toBetween

All Layout compose with toBetween:

Compose base on toBetween
row
toBetween toTop
row
toBetween toCenterY
row
toBetween toBottom
column
toBetween toLeft
column
toBetween toCenterX
column
toBetween toRight

Compose base on toEvenly

All Layout compose with toEvenly:

Compose base on toEvenly
row
toEvenly toTop
row
toEvenly toCenterY
row
toEvenly toBottom
column
toEvenly toLeft
column
toEvenly toCenterX
column
toEvenly toRight

Compose base on toAround

All Layout compose with toAround:

Compose base on toAround
row
toAround toTop
row
toAround toCenterY
row
toAround toBottom
column
toAround toLeft
column
toAround toCenterX
column
toAround toRight