Interface LayoutChildProperties

Properties for defining the layout of a child element in Penpot.

interface LayoutChildProperties {
    absolute: boolean;
    zIndex: number;
    horizontalSizing: "fill" | "auto" | "fix";
    verticalSizing: "fill" | "auto" | "fix";
    alignSelf:
        | "center"
        | "auto"
        | "start"
        | "end"
        | "stretch";
    horizontalMargin: number;
    verticalMargin: number;
    topMargin: number;
    rightMargin: number;
    bottomMargin: number;
    leftMargin: number;
    maxWidth: null | number;
    maxHeight: null | number;
    minWidth: null | number;
    minHeight: null | number;
}

Properties

absolute zIndex horizontalSizing verticalSizing alignSelf horizontalMargin verticalMargin topMargin rightMargin bottomMargin leftMargin maxWidth maxHeight minWidth minHeight

Properties

absolute

absolute: boolean

Specifies whether the child element is positioned absolutely. When set to true, the element is taken out of the normal document flow and positioned relative to its nearest positioned ancestor.

zIndex

zIndex: number

Defines the stack order of the child element Elements with a higher zIndex will be displayed in front of those with a lower zIndex.

horizontalSizing

horizontalSizing: "fill" | "auto" | "fix"

Determines the horizontal sizing behavior of the child element

  • 'auto': The width is determined by the content.
  • 'fill': The element takes up the available width.
  • 'fix': The width is fixed.

verticalSizing

verticalSizing: "fill" | "auto" | "fix"

Determines the vertical sizing behavior of the child element.

  • 'auto': The height is determined by the content.
  • 'fill': The element takes up the available height.
  • 'fix': The height is fixed.

alignSelf

alignSelf:
    | "center"
    | "auto"
    | "start"
    | "end"
    | "stretch"

Aligns the child element within its container.

  • 'auto': Default alignment.
  • 'start': Aligns the element at the start of the container.
  • 'center': Centers the element within the container.
  • 'end': Aligns the element at the end of the container.
  • 'stretch': Stretches the element to fill the container.

horizontalMargin

horizontalMargin: number

Sets the horizontal margin of the child element. This is the space on the left and right sides of the element.

verticalMargin

verticalMargin: number

Sets the vertical margin of the child element. This is the space on the top and bottom sides of the element.

topMargin

topMargin: number

Sets the top margin of the child element. This is the space above the element.

rightMargin

rightMargin: number

Sets the right margin of the child element. This is the space to the right of the element.

bottomMargin

bottomMargin: number

Sets the bottom margin of the child element. This is the space below the element.

leftMargin

leftMargin: number

Sets the left margin of the child element. This is the space to the left of the element.

maxWidth

maxWidth: null | number

Defines the maximum width of the child element. If set to null, there is no maximum width constraint.

maxHeight

maxHeight: null | number

Defines the maximum height of the child element. If set to null, there is no maximum height constraint.

minWidth

minWidth: null | number

Defines the minimum width of the child element. If set to null, there is no minimum width constraint.

minHeight

minHeight: null | number

Defines the minimum height of the child element. If set to null, there is no minimum height constraint.

Settings

Member Visibility

On This Page

Properties