Penpot plugins API
    Preparing search index...

    Interface FlexLayout

    Represents a flexible layout configuration in Penpot. This interface extends CommonLayout and includes properties for defining the direction, wrapping behavior, and child management of a flex layout.

    interface FlexLayout {
        alignItems?: "center" | "start" | "end" | "stretch";
        alignContent?:
            | "center"
            | "start"
            | "end"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        justifyItems?: "center"
        | "start"
        | "end"
        | "stretch";
        justifyContent?:
            | "center"
            | "start"
            | "end"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        rowGap: number;
        columnGap: number;
        verticalPadding: number;
        horizontalPadding: number;
        topPadding: number;
        rightPadding: number;
        bottomPadding: number;
        leftPadding: number;
        horizontalSizing: "fill"
        | "auto"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        remove(): void;
        dir: "row" | "row-reverse" | "column" | "column-reverse";
        wrap?: "wrap" | "nowrap";
        appendChild(child: Shape): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    alignItems? alignContent? justifyItems? justifyContent? rowGap columnGap verticalPadding horizontalPadding topPadding rightPadding bottomPadding leftPadding horizontalSizing verticalSizing dir wrap?

    Methods

    remove appendChild

    Properties

    alignItems?: "center" | "start" | "end" | "stretch"

    The alignItems property specifies the default alignment for items inside the container. It can be one of the following values:

    • 'start': Items are aligned at the start.
    • 'end': Items are aligned at the end.
    • 'center': Items are centered.
    • 'stretch': Items are stretched to fill the container.
    alignContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly"

    The alignContent property specifies how the content is aligned within the container when there is extra space. It can be one of the following values:

    • 'start': Content is aligned at the start.
    • 'end': Content is aligned at the end.
    • 'center': Content is centered.
    • 'space-between': Content is distributed with space between.
    • 'space-around': Content is distributed with space around.
    • 'space-evenly': Content is distributed with even space around.
    • 'stretch': Content is stretched to fill the container.
    justifyItems?: "center" | "start" | "end" | "stretch"

    The justifyItems property specifies the default justification for items inside the container. It can be one of the following values:

    • 'start': Items are justified at the start.
    • 'end': Items are justified at the end.
    • 'center': Items are centered.
    • 'stretch': Items are stretched to fill the container.
    justifyContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly"

    The justifyContent property specifies how the content is justified within the container when there is extra space. It can be one of the following values:

    • 'start': Content is justified at the start.
    • 'center': Content is centered.
    • 'end': Content is justified at the end.
    • 'space-between': Content is distributed with space between.
    • 'space-around': Content is distributed with space around.
    • 'space-evenly': Content is distributed with even space around.
    • 'stretch': Content is stretched to fill the container.
    rowGap: number

    The rowGap property specifies the gap between rows in the layout.

    columnGap: number

    The columnGap property specifies the gap between columns in the layout.

    verticalPadding: number

    The verticalPadding property specifies the vertical padding inside the container.

    horizontalPadding: number

    The horizontalPadding property specifies the horizontal padding inside the container.

    topPadding: number

    The topPadding property specifies the padding at the top of the container.

    rightPadding: number

    The rightPadding property specifies the padding at the right of the container.

    bottomPadding: number

    The bottomPadding property specifies the padding at the bottom of the container.

    leftPadding: number

    The leftPadding property specifies the padding at the left of the container.

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

    The horizontalSizing property specifies the horizontal sizing behavior of the container. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.
    verticalSizing: "fill" | "auto" | "fix"

    The verticalSizing property specifies the vertical sizing behavior of the container. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.
    dir: "row" | "row-reverse" | "column" | "column-reverse"

    The direction of the flex layout.

    • 'row': Main axis is horizontal, from left to right.
    • 'row-reverse': Main axis is horizontal, from right to left.
    • 'column': Main axis is vertical, from top to bottom.
    • 'column-reverse': Main axis is vertical, from bottom to top.
    wrap?: "wrap" | "nowrap"

    The optional wrapping behavior of the flex layout.

    • 'wrap': Child elements will wrap onto multiple lines.
    • 'nowrap': Child elements will not wrap.

    Methods

    • Appends a child element to the flex layout.

      Parameters

      • child: Shape

        The child element to be appended, of type Shape.

      Returns void

      flexLayout.appendChild(childShape);

    Settings

    Member Visibility

    On This Page

    Properties
    Methods