Skip to content
pixi-silk
GitHub repository
Interface

LayoutStyle

import type { LayoutStyle } from 'pixi-silk/layout';

The style of a layout node. Every property is optional and defaults to the CSS initial value.

Extended by#

Properties#

PropertyTypeDescriptionDefined in
alignContent?AlignContentLine distribution of a wrapping container. Default stretch.layout/style.ts:82
alignItems?AlignItemsCross axis alignment of the children. Default stretch.layout/style.ts:76
alignSelf?"auto" | AlignItemsCross axis alignment of this node, over its parent’s alignItems.layout/style.ts:78
aspectRatio?numberWidth divided by height. Sizes the missing axis when only one is known.layout/style.ts:102
basis?LengthMain size before growing or shrinking. Default auto (the width or height, else the content).layout/style.ts:88
bottom?LengthDistance from the parent’s bottom edge, for position: 'absolute'.layout/style.ts:108
columnGap?numberSpace between columns. Overrides gap.layout/style.ts:54
direction?FlexDirectionMain axis. Default row.layout/style.ts:46
display?"none" | "flex"none takes the node out of layout: it gets a zero box. Default flex.layout/style.ts:42
gap?numberSpace between items and between lines, in pixels. Default 0.layout/style.ts:50
grow?numberShare of the free space this item takes. Default 0.layout/style.ts:84
height?LengthBorder-box height. Default auto.layout/style.ts:92
inset?LengthSets top, right, bottom and left at once. The single sides override it.layout/style.ts:112
justifyContent?JustifyContentMain axis distribution of the free space. Default start.layout/style.ts:80
left?LengthDistance from the parent’s left edge, for position: 'absolute'.layout/style.ts:110
margin?Edges<Length>Space outside the box. 'auto' takes up free space, which centres or pushes the item.layout/style.ts:66
marginBottom?LengthBottom margin. Overrides margin.layout/style.ts:72
marginLeft?LengthLeft margin. Overrides margin.layout/style.ts:74
marginRight?LengthRight margin. Overrides margin.layout/style.ts:70
marginTop?LengthTop margin. Overrides margin.layout/style.ts:68
maxHeight?LengthLargest height. Default none.layout/style.ts:100
maxWidth?LengthLargest width. Default none.layout/style.ts:98
minHeight?LengthSmallest height. Default 0.layout/style.ts:96
minWidth?LengthSmallest width. Default 0.layout/style.ts:94
padding?Edges<number | `${number}%`>Space inside the box. Percents are of the parent’s width, as in CSS.layout/style.ts:56
paddingBottom?number | `${number}%`Bottom padding. Overrides padding.layout/style.ts:62
paddingLeft?number | `${number}%`Left padding. Overrides padding.layout/style.ts:64
paddingRight?number | `${number}%`Right padding. Overrides padding.layout/style.ts:60
paddingTop?number | `${number}%`Top padding. Overrides padding.layout/style.ts:58
position?"relative" | "absolute"absolute places the node against its parent’s box with top, right, bottom and left.layout/style.ts:44
right?LengthDistance from the parent’s right edge, for position: 'absolute'.layout/style.ts:106
rowGap?numberSpace between lines (rows). Overrides gap.layout/style.ts:52
shrink?numberShare of the overflow this item gives up, weighted by its basis. Default 1.layout/style.ts:86
top?LengthDistance from the parent’s top edge, for position: 'absolute'.layout/style.ts:104
width?LengthBorder-box width. Default auto.layout/style.ts:90
wrap?"nowrap" | "wrap" | "wrap-reverse"Break items into several lines when they overflow. Default nowrap.layout/style.ts:48