Booklet

author

Fullstack HQ

Development

Get to Know the Power of Flexbox

Get to Know the Power of Flexbox

The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic — thus the word 'Tlex
Note: Flexbox is most appropriate to the components of an app, and small-scale layouts, while the Grid layout is good for larger scale layouts. Weill cover the difference between the two in the future.

A Flexbox layout consists of a flex container that holds flex items. Flexbox lays items out in a single row or column. Let's talk about what that means:

The flex container can be laid out horizontally or vertically. This is referred to as the main axis. Flex items can flex their sizes, growing to fill unused space in the container, or shrinking to avoid overflow

To activate Flex powers, add display: flex to the parent element. This may mean that you have to wrap the elements in a parent <div> or other element.

Do you want rows or columns?

Do you want these items located at the beginning of the main axis?

Do you want the items on one line or to move to the next line?

How do you want these items laid out?

More booklets by Fullstack HQ

More Development booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets