Utilities

提供有關排版上能夠對齊、間距等等類別。


對齊 Align

Lazy4 採用 Flex 後提供更多對齊方式,包含水平對齊與垂直對齊。對齊類別請用在 .f-row上,使用方式 .f-align:*。對齊類別可用於所有 Flex 設定上。

類別 屬性
置左 l .f-align{@bp}:l justify-content: flex-start
置中 c .f-align{@bp}:c justify-content: center
置右 r .f-align{@bp}:r justify-content: right
左右對齊 j .f-align{@bp}:j justify-content: space-between
水平均等對齊 a .f-align{@bp}:a justify-content: space-around
水平均等間格 a .f-align{@bp}:e justify-content: space-evenly
靠上對齊 t .f-align{@bp}:t align-items: flex-start
垂直置中 m .f-align{@bp}:m align-items: center
靠下對齊 t .f-align{@bp}:b align-items: flex-end
齊高 s .f-align{@bp}:s align-items: stretch

置左

向左對齊請在 .f-row 加上 .f-align:l

4
4
<div class="f-row f-align:l"></div>

置中

向中對齊請在 .f-row 加上 .f-align:c

4
4
<div class="f-row f-align:c"></div>

置右

向右對齊請在 .f-row 加上 .f-align:r

4
4
<div class="f-row f-align:r"></div>

左右對齊

左右對齊請在 .f-row 加上 .f-align:j

4
4
<div class="f-row f-align:j"></div>

水平均等對齊

水平均等對齊請在 .f-row 加上 .f-align:a

4
4
<div class="f-row f-align:a"></div>

靠上對齊

靠上對齊請在 .f-row 加上 .f-align:t

4
4
<div class="f-row f-align:t"></div>

垂直置中

垂直置中請在 .f-row 加上 .f-align:m

4
4
<div class="f-row f-align:m"></div>

靠下對齊

靠下對齊請在 .f-row 加上 .f-align:b

4
4
<div class="f-row f-align:b"></div>

齊高

齊高請在 .f-row 加上 .f-align:s

4
4
<div class="f-row f-align:s"></div>