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>
流動設定
設定 Flex 欄位組件是否使用流動排版或是固定排版。
| 值 | 類別 | 屬性 | |
|---|---|---|---|
| 流動 | fluid | .f-flex{@bp}:fluid | flex-grow: 1; flex-shrink: 1; |
| 固定 | fixed | .f-flex{@bp}:fixed | flex-grow: 0; flex-shrink: 0; |