布局单元格 cell

用法

作为 flex 元素的直接子元素使用。

zin 声明

row
(
    set::align('center'),
    cell
    (
        set::order(2),
        set::flex('auto'),
        set::align('flex-end'),
        'Cell 1',
    ),
    cell
    (
        set::width(50),
        set::flex('none'),
        'Cell 2',
    ),
);

生成的 HTML

<div class="row items-center">
    <div class="flex-auto" style="order: 2; align-self: flex-end">Cell 1</div>
    <div class="flex-none" style="flex-basis: 50px;">Cell 2</div>
</div>

属性

名称	类型	可选	默认值	说明
flex	string	✓	null	flex 类型或具体的值，例如：'auto'、'none'、'1'、'auto 1 1'。
order	int	✓	null	flex-order 属性。
grow	int	✓	null	flex-grow 属性。
shrink	int	✓	null	flex-shrink 属性。
width	stringint	✓	null	flex-basis 属性，支持数值或百分比，例如 128px、1/3、30%、128px。
align	string	✓	null	align-self 属性，例如 'auto'、'flex-start'、'flex-end'、'center'、'baseline'、'stretch'。