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" | "fit-content";
    verticalSizing: "fill" | "auto" | "fit-content";
    remove(): void;
    dir:
        | "row"
        | "row-reverse"
        | "column"
        | "column-reverse";
    wrap?: "wrap" | "nowrap";
    appendChild(child: Shape): void;
}

Hierarchy (view full)

Properties

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

Methods

remove appendChild

Properties

OptionalalignItems

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.

OptionalalignContent

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.

OptionaljustifyItems

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.

OptionaljustifyContent

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

rowGap: number

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

columnGap

columnGap: number

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

verticalPadding

verticalPadding: number

The verticalPadding property specifies the vertical padding inside the container.

horizontalPadding

horizontalPadding: number

The horizontalPadding property specifies the horizontal padding inside the container.

topPadding

topPadding: number

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

rightPadding

rightPadding: number

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

bottomPadding

bottomPadding: number

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

leftPadding

leftPadding: number

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

horizontalSizing

horizontalSizing: "fill" | "auto" | "fit-content"

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

  • 'fit-content': The container fits the content.
  • 'fill': The container fills the available space.
  • 'auto': The container size is determined automatically.

verticalSizing

verticalSizing: "fill" | "auto" | "fit-content"

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

  • 'fit-content': The container fits the content.
  • 'fill': The container fills the available space.
  • 'auto': The container size is determined automatically.

dir

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.

Optionalwrap

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

remove

appendChild

  • appendChild(child): void

  • Appends a child element to the flex layout.

    Parameters

    • child: Shape

      The child element to be appended, of type Shape.

    Returns void

    Example

    flexLayout.appendChild(childShape);

Settings

Member Visibility

On This Page

Properties
Methods