Skip to main content

LayoutBlock

new LayoutBlock(options)

LayoutBlock helps to create flexbox and grid layout systems in canvas. If you're familiar with css layouts this is not gonna be odd. You need to pass a option to layout property for defining your layout type default flex.

Options​

layout​

Layout defines which layout system to use in LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox

block.layout(option)

Option

  • type : "flex" | "inline-flex" | "grid" | "inline-grid" | undefined
  • default: "flex"

Returns

  • layout : "flex" | "inline-flex" | "grid" | "inline-grid"

justifyContent​

Justify content defines how to distribute the space on LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-content

block.justifyContent(option)

Option

  • type : "normal" | "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end" | "stretch" | undefined
  • default: "normal"

Returns

  • justifyContent : "normal" | "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end" | "stretch"

alignContent​

Align content defines how to distribute the space on LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content

block.alignContent(option)

Option

  • type : "normal" | "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end" | "stretch" | undefined
  • default: "normal"

Returns

  • alignContent : "normal" | "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end" | "stretch"

alignItems​

Align content defines how to align blocks on LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/align-content

block.alignItems(option)

Option

  • type : "normal" | "start" | "center" | "end" | "stretch" | undefined
  • default: "normal"

Returns

  • alignItems : "normal" | "start" | "center" | "end" | "stretch"

placeContent​

Place content defines both align and justify content in one property. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/place-content

block.placeContent(option)

Option

  • type : (AlignContent & JustifyContent) | undefined
  • default: ["normal", "normal"]

Returns

  • placeContent : (AlignContent & JustifyContent)

placeItems​

Place content defines both align and justify items in one property. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/place-items

block.placeItems(option)

Option

  • type : (AlignItems & JustifyItems) | undefined
  • default: ["normal", "normal"]

Returns

  • placeItems : (AlignItems & JustifyItems)

flexDirection​

Flex direction defines how to align blocks in LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction

block.flexDirection(option)

Option

  • type : "column" | "column-reverse" | "row" | "row-reverse" | undefined
  • default: "column"

Returns

  • flexDirection : "column" | "column-reverse" | "row" | "row-reverse"

flexWrap​

Flex wrap defines how to wrap flex layout system. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-direction

block.flexWrap(option)

Option

  • type : "nowrap" | "wrap" | "wrap-reverse" | undefined
  • default: "nowrap"

Returns

  • flexWrap : "nowrap" | "wrap" | "wrap-reverse"

flexFlow​

Flex flow defines both flexdirection and flexwrap in one array for LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-flow

block.flexFlow(option)

Option

  • type : ([FlexDirecton, FlexWrap]) | undefined
  • default: ["row", "nowrap"]

Returns

  • flexFlow : ([FlexDirecton, FlexWrap])

justifyItems​

Justify items defines how to align blocks in grid layout system for LayoutBlock. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/justify-items

block.justifyItems(option)

Option

  • type : "normal" | "stretch" | "start" | "end" | "center" | "left" | "right" | undefined
  • default: "normal"

Returns

  • justifyItems : "normal" | "stretch" | "start" | "end" | "center" | "left" | "right"

gap​

Gap defines how much space to take in x or y axis for both flexbox and grid layout systems. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/gap

block.gap(option)

Option

  • type : number | number[] | undefined
  • default: 0

Returns

  • gap : number | number[]

columnGap​

Gap column defines how much space to take in y axis for both flexbox and grid layout systems. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/column-gap

block.columnGap(option)

Option

  • type : number | undefined
  • default: 0

Returns

  • columnGap : number

rowGap​

Gap row defines how much space to take in x axis for both flexbox and grid layout systems. Implementation based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/row-gap

block.rowGap(option)

Option

  • type : number | undefined
  • default: 0

Returns

  • rowGap : number

gridAutoRows​

Grid auto rows defines how much size each row will take in rows related to block size. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-auto-rows

block.gridAutoRows(option)

Option

  • type : number[] | undefined
  • default: []

Returns

  • gridAutoRows : number[]

gridAutoColumns​

Grid auto columns defines how much size each column will take in columns related to block size. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-auto-columns

block.gridAutoColumns(option)

Option

  • type : number[] | undefined
  • default: []

Returns

  • gridAutoColumns : number[]

gridAutoFlow​

Grid auto flow defines how each block will place in grid related to child blocks size. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-auto-flow

block.gridAutoFlow(option)

Option

  • type : "row" | "column" | "dense" | "row dense" | "column dense" | undefined
  • default: "row"

Returns

  • gridAutoFlow : "row" | "column" | "dense" | "row dense" | "column dense"

gridTemplateAreas​

Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-areas

block.gridTemplateAreas(option)

Option

  • type : string[] | undefined
  • default: []

Returns

  • gridTemplateAreas : string[]

gridTemplate​

Grid template defines grid template columns, rows and areeas in one parameter. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template

block.gridTemplate(option)

Option

  • type : number[] | undefined
  • default: []

Returns

  • gridTemplate : number[]

gridTemplateColumns​

Grid template columns defines column sizes in grid layout system. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns

block.gridTemplateColumns(option)

Option

  • type : number[] | number | undefined
  • default: []

Returns

  • gridTemplateColumns : number[] | number

gridTemplateRows​

Grid template rows defines row sizes in grid layout system. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-rows

block.gridTemplateRows(option)

Option

  • type : number[] | number | undefined
  • default: 0

Returns

  • gridTemplateRows : number[] | number

grid​

Grid template defines gridAutoColumns, gridAutFlow, gridAutoRows, gridTemplateAreas, gridTemplateColumns, gridTemplateRows in one parameter. Implimentatino based on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid

block.grid(option)

Option

  • type : number[] | undefined
  • default: []

Returns

  • grid : number[]