Introduction

Fower 提供了一个强大的基于 Flexbox 的布局工具,通过调整布局的方向(Direction)和对齐(Alignment),可以实现大部分的布局,使布局工作更轻松。

相比传统的 flex 布局,Fower 的布局更加抽象精简,Fower 的布局抽象为 toCentertoCenterXtoCenterYtoLefttoToptoRighttoBottomtoBetweentoEvenlytoAround 十种原子对齐方式,使用时你可以忘记传统 flex 布局中的主轴(main axis)和交叉轴(cross axis)的概念,你只需要有方向感即可。

和 Flexbox 对比#

Fower Layout 基于 Flexbox ,与 Flexbox 相比,它具有以下优点:

  • Less API :您不必记住 Flexbox 的所有 API,只需记住 10 个原子属性:toCentertoCenterXtoCenterYtoLefttoToptoRighttoBottomtoBetweentoEvenlytoAround

  • Easy to learn: 更直观,心智负担更低。 无需了解主轴和交叉轴。

核心概念#

布局方向:row、column

布局对齐:toCenter、toCenterX、toCenterY、toLeft、toTop、toRight、toBottomtoBetweentoEvenlytoAround

Live Demo#

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

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