The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Layout

With Flexbox, you can specify the layout of an element and its children to provide a consistent layout on different screen sizes.

Flex Items

Flex Direction

Setting the Flex Direction establishes the main axis and direction that child elements are placed along in the layout.

Configuration

Parameter

Description

Row

Places child elements horizontally.

Column

Places child elements vertically.

Row Reverse

Places child elements horizontally and additionally reverses the order that the elements are displayed.

Column Reverse

Places child elements vertically and additionally reverses the order that elements are displayed.

Resources

Yoga Docs
React Native Docs
CSS Tricks

Align Items

Setting align items determines how child elements are spread across the remaining space of the cross axis (the opposite of the axis set in Flex Direction) they lie on.

Configuration

Parameter

Description

Flex Start

Child elements are positioned at the beginning of the container.

Flex End

Child elements are positioned at the end of the container.

Center

Child elements are positioned in the center of the container.

Stretch

Child elements will stretch to fill the container.

Baseline

Child elements are positioned so that their baselines are lined up with each other.

Resources

Yoga Docs
React Native Docs
CSS Tricks

Justify Content

The Justify Content property determines how children elements are spread across the the remaining space of the axis they lie on.

Configuration

Parameter

Description

Flex Start

Child elements are grouped together and positioned at the beginning of the line.

Flex End

Child elements are grouped together and positioned at the end of the line.

Center

Child elements are grouped together and centered in the middle of the line.

Space Between

The first child element is positioned at the beginning, the last child element is positioned at the end and all remaining child elements are spread out evenly in between.

Space Around

Child elements are spread out across the line with equal amounts of space surrounding them.

Space Evenly

Items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same.

Resources

Yoga Docs
React Native Docs
CSS Tricks

Selected Item

Align Self

Align Self shares the same positioning behavior as align items, however, it is set on each individual child element and overrides the settings applied to the parent element in Align Items.

Configuration

Parameter

Description

Flex Start

The child element will be positioned at the beginning of the container.

Flex End

The child element will be positioned at the end of the container.

Center

The child element will be positioned in the center of the container.

Baseline

The child element will stretch to fill the container.

Stretch

The child element will stretch to fill the container.

Resources

Yoga Docs
React Native Docs
CSS Tricks

Flex Grow

The Flex Grow property describes how a child element will automatically resize itself in relation to other child elements within a parent element.

Configuration

Flex grow can be set to any number greater than 0.

Resources

Yoga Docs

Flex Shrink

Flex Shrink is generally used in tangent with Flex Grow and determines the behavior of children elements once they exceed the size of the container. Just like Flex Grow, Flex Shrink sets a relative value on the children elements. Setting an element's Flex Shrink to 0 prevents the element from shrinking at all and will retain its original size calculated from the Flex Grow setting or from the set width and height.

Configuration

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Resources

Yoga Docs

Flex Basis

Flex basis is an axis-independent way of providing the default size of an item along the main axis. Setting the flex basis of a child is similar to setting the width of that child if its parent is a container with flex direction: row or setting the height of a child if its parent is a container with flex direction: column. The flex basis of an item is the default size of that item, the size of the item before any flex grow and flex shrink calculations are performed.

Configuration

Flex Shrink can be set to any number greater than 0, with 1 being the default value.

Resources

Yoga Documentation

Content

Flex Wrap

The Flex Wrap property is set on a container and determines how child elements will be laid out if they exceed the maximum dimensions of the container.

Configuration

Parameter

Description

None

Forces all of the child elements onto one line and which has the potential to force shrink the elements in order to make them fit on the same line.

Wrap

The child elements will be placed along multiple lines, as needed, allowing them to retain their intended sizes.

Reverse

The same as Wrap, however the order of the child elements is reversed.

Resources

Yoga Docs

Aligh Content

Align Content is only applicable when children elements are in a container that is set to flex wrap and there are multiple lines of children elements. Setting the Align Content property determines how the lines of elements are positioned on the cross-axis (the axis opposite of the main axis defined in Flex Direction).

Configuration

Parameter

Description

Flex Start

Lines are grouped together and positioned at the beginning of the cross axis.

Flex End

Lines are grouped together and positioned at the end of the cross axis.

Stretch

Lines are stretched to the height of the container's cross axis.

Center

Lines are grouped together and positioned in the center of the container's cross axis.

Space Between

The first line is positioned at the beginning of the cross axis, the last element is positioned at the end of the cross axis, and all remaining lines are spread out evenly in between.

Space Around

All the lines are spread out across the cross axis of the container with equal amounts of space surrounding them.

Resources

Yoga Docs
CSS Tricks

Updated 3 months ago


Layout


With Flexbox, you can specify the layout of an element and its children to provide a consistent layout on different screen sizes.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.