布局

在布局方式上 Kraken 目前支持 W3C 标准的流式布局与 弹性盒布局。

布局方式

display 属性定义了元素的显示类型，通过指定不同的值来控制布局方式。

属性

display

• 定义：设置元素的显示类型。
• 属性值：[ block | inline-block | inline | flex | inline-flex | sliver | none ]
• 参考：链接。
• 说明：Kraken 目前支持的类型有 block | inline-block | inline | flex | inline-flex | sliver | none，其中 sliver 为 Kraken 为高性能列表扩展的类型。

流式布局

Kraken 支持 CSS 的流式布局，即在文档流中通过内联与块的方式排列元素，同时可以通过 display 属性 改变元素的默认排列方式。

内联元素

在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向，从左边开始一个接一个地显示。 Kraken 中默认内联显示的常用标签有 <span> <img> <input> <a>。

块元素

在文档流中，块元素一个接一个地显示，就像该文档的写作模式中的段落一样，从顶部开始向下显示并移动页面。 Kraken 中默认块级展示的常用标签有 <div> <p> 。

弹性盒布局

Kraken 的弹性盒布局基于 CSS 的 Flexbox 模型，Kraken 支持的 Flexbox 属性如下：

flex-direction

• 定义：定义了 flex 容器中 flex 成员项的排列方向。
• 属性值：[ row | row-reverse | column | column-reverse ]
• 参考：链接。

flex-wrap

• 定义：指定 flex 成员项以单行显示还是多行显示。如果允许换行，该属性同时指定在行内的排列方向。
• 属性值：[ nowrap | wrap | wrap-reverse ]
• 参考：链接。

flex-flow

• 定义：flex-direction 与 flex-wrap 的简写属性。
• 属性值：[ nowrap | wrap | wrap-reverse ]
• 属性值：[ \ || \ ]
• 参考：链接。

align-items

• 定义：定义了 flex 容器中所有 flex 成员项在纵轴方向上的排列方式。
• 属性值：[ flex-start | start | flex-end | end | center | stretch | baseline ]
• 参考：链接。

justify-content

• 定义：定义了 flex 容器中 flex 成员项在主轴方向上的排列方式。
• 属性值：[ flex-start | start | flex-end | end | center | space-around | space-between | space-evenly ]
• 参考：链接。

align-content

• 定义：当 flex 成员项多行排列时，定义了每行在纵轴方向上的排列方式。该属性对单行排列方式无效 (设置了 flex-wrap: nowrap)。
• 属性值：[ flex-start | flex-end | center | space-around | space-between ]
• 参考：链接。

align-self

• 定义：定义了 flex 容器中单个 flex 成员项在纵轴方向上如何排列以处理空白部分。
• 属性值：[ flex-start | flex-end | cener | baseline | stretch ]
• 参考：链接。

flex

• 定义：定义了 flex 成员项可以占用容器中剩余空间的大小。
• 属性值：[ auto | initial | none | \ \? || \ ]
• 参考：链接。

flex-grow

• 定义：当所有 flex 成员项在主轴上 size 之和小于 flex 容器 size 时，指定了 flex 容器的剩余空间应该分配给当前 flex 成员项的比例。
• 属性值：\
• 参考：链接。

flex-shrink

• 定义：当所有 flex 成员项在主轴上 size 之和大于 flex 容器 size 时，指定了当前 flex 成员项从所有 flex 成员项超出空间中应该扣除的比例。
• 属性值：\
• 参考：链接。

flex-basis

• 定义：指定了 flex 成员项在主轴方向上的初始大小。
• 属性值：[ auto | \[ px | rpx | vw | vh ] ]
• 参考：链接。