Use Flex Layout

What is the Flex Layout?

Flex Layout is utilising the power of Flexbox. We've developed this to provide you with an easy to use system but harness the potential of Flexbox in an understandable and managable way.

Flex Layout Basics

Flex Layout defines how the children inside the bar will behave which gives you great flexibility on how items will be spread out and positioned.

Flex Layout Settings

Let's go through all the different settings our Flex Layout offers.

• Layout - This option defines the direction of the children meaning they can either be positioned side by side or under each other.
  • Row
  • Column
• Reverse Layout - If you want to reverse the order of the children then make sure to check this option. Basically imagine this like using a mirror.
• Wrap Children - By default Flexbox will try to keep the elements on a row or column so wrapping children is a good way if you want to prevent this from happening.
• Horizontal - Depending on your Layout settings you can define how the children are orientated.
  • Start - Positions the boxes in the beginning.
  • Center - Positions the boxes centered.
  • End - Positions the boxes at the end.
  • Space Between - Adds space between the boxes.
  • Space Around - Adds space around the boxes.
• Vertical
  • Start - Positions the boxes in the beginning.
  • Center - Positions the boxes centered.
  • End - Positions the boxes at the end.
  • Stretch - Streched the boxes out evenly.

Flex Settings

• Preset
  • Standard
  • No Shrink - Preventing the box from shrinking.
  • Fill Space - Sets the box to fill available space.
  • Fill Space Equally - Fills the space equally.
• Flex Grow - If there is extra space in a column and you utilise this function then it will "grow" that column to make use of the unused space.
• Flex Shrink If you want to prevent a container from shrinking you can set this option to 0. A 1 would indnicate a shrink if possible.
• Flex Basis - Defines the fundamental dimension a box should take up.

Video Introduction

As there is a learning curve for Flexbox we've created a video that gives you a great introduction of Flexbox and how to use it. Make sure to check it out to get a full understanding of the potential.

More Information

While Flexbox is a very complex topic as we can discuss various options and functionality we recommend that you read following articles to get a basic understanding of Flexbox which will help you to use and understand the technology to the fullest.

• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Summary

You've just learned the basics of how to use Flexbox and create complex container strucutres.