image representing the current explore topic

Flex Components and how to

Flex Components

Flexbox is a newer layout technology available in browsers that allows better responsive layout. Flex box allows you to arrange things in columns or rows, in forward or reverse direction, and allows you to specify how they're spaced. There are two main components that work together here: the Flex Container, and the Flex Column. The Flex Container is a content area where anything inside will be arranged using the flexbox rules that you specify. The flex column is a way of dividing that space into smaller responsive pieces. Together these allow you to create nearly any page layout you can imagine.

 

Flex Container

The Flex Container creates a content area and allows you to organize anything in that area according to the flex rules. Items inside the Flex Container will take up as much space as they're allowed to take, leaving the rest to be filled in by other content within the container. 

 

Fields

Field Options Usage
Spacing flex-start Children are placed starting in the top left.
  flex-end Children are placed ending in the bottom right.
  center Children are centered left to right.
  space-between Children are spaced out with the available space being distributed evenly BETWEEN them.
  space-around Children are spaced out with the available space being distributed AROUND them.
Direction row Children are arranged from left to right and top to bottom.
  row-reverse Children are arranged from right to left and top to bottom.
  column Children are arranged from top to bottom and left to right.
  column-reverse Children are arranged from bottom to top and left to right.
Wrap wrap If not all children will fit in a single row/column it continues placing them them on the next row/column.
  no-wrap Prevents children from wrapping into the next row/column.
  wrap-reverse Children will wrap into a previous column/row instead of the next columne/row.

 

Examples

 

 

Spacing: flex-start

1

2

3

4

5

Spacing: flex-end

1

2

3

4

5

Spacing: center

1

2

3

4

5

Spacing: space-between

1

2

3

4

5

Spacing: space-around

1

2

3

4

5

Spacing: row

1

2

3

4

5

Spacing: row-reverse

1

2

3

4

5

Spacing: column

1

2

3

4

5

Spacing: column-reverse

1

2

3

4

5

Wrap: wrap

1

2

3

4

5

6

7

8

9

10

Wrap: nowrap

1

2

3

4

5

6

7

8

9

10

Wrap: wrap-reverse

1

2

3

4

5

6

7

8

9

10

Flex Column

Flex columns are are used to constrain the width of child objects/containers. This component allows you to subdivide some piece of content using a percentage based width while supporting responsive layout. Columns should be used inside Flex Containers for best result.
 

Fields

Field Options Usage
Column Width 5% - 100% of site width Allows you to specify a percentage of the full site width to use as the colum's width. If a user visits on a browser with a smaller size than the column width, the column will shrink to fit.

 

Examples

Unconstrained text area.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies at leo sed dapibus. Nullam tempor dolor aliquet, luctus neque in, pellentesque elit. Nam quam quam, tristique mattis faucibus at, posuere in sem. Ut in quam venenatis diam vestibulum ornare eget at libero. In hac habitasse platea dictumst. Phasellus hendrerit arcu in nunc convallis tincidunt. Fusce tristique nibh sed neque ultrices, quis porta tellus venenatis. Quisque vel dictum diam, et pharetra erat. In augue elit, euismod eu orci et, luctus ultricies dui. Donec venenatis tellus id maximus vestibulum.

Text area inside a Flex Column at 30% width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies at leo sed dapibus. Nullam tempor dolor aliquet, luctus neque in, pellentesque elit. Nam quam quam, tristique mattis faucibus at, posuere in sem. Ut in quam venenatis diam vestibulum ornare eget at libero. In hac habitasse platea dictumst. Phasellus hendrerit arcu in nunc convallis tincidunt. Fusce tristique nibh sed neque ultrices, quis porta tellus venenatis. Quisque vel dictum diam, et pharetra erat. In augue elit, euismod eu orci et, luctus ultricies dui. Donec venenatis tellus id maximus vestibulum.

Text area inside a Flex Column at 30% width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies at leo sed dapibus. Nullam tempor dolor aliquet, luctus neque in, pellentesque elit. Nam quam quam, tristique mattis faucibus at, posuere in sem. Ut in quam venenatis diam vestibulum ornare eget at libero. In hac habitasse platea dictumst. Phasellus hendrerit arcu in nunc convallis tincidunt. Fusce tristique nibh sed neque ultrices, quis porta tellus venenatis. Quisque vel dictum diam, et pharetra erat. In augue elit, euismod eu orci et, luctus ultricies dui. Donec venenatis tellus id maximus vestibulum.

Text area inside a Flex Column at 30% width.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies at leo sed dapibus. Nullam tempor dolor aliquet, luctus neque in, pellentesque elit. Nam quam quam, tristique mattis faucibus at, posuere in sem. Ut in quam venenatis diam vestibulum ornare eget at libero. In hac habitasse platea dictumst. Phasellus hendrerit arcu in nunc convallis tincidunt. Fusce tristique nibh sed neque ultrices, quis porta tellus venenatis. Quisque vel dictum diam, et pharetra erat. In augue elit, euismod eu orci et, luctus ultricies dui. Donec venenatis tellus id maximus vestibulum.