Flex Box

Flex Box is a module of CSS which provides a set of properties for layout our HTML tags in a web page, the advantage with traditional positioning is the easy way to distribute the elements into a container. This post explains through the examples each one of the properties in order to layout your page.

Figure 1. An illustration of the various directions and sizing terms as applied to a row flex container.

As the W3C mentions about Flexbox, It uses a default way to layout the elements in the viewport, above a short image’s description:

  • Flex-Container: A flex container is a box generated by an element with a computed display of flex or inline-flex.
  • Flex-Item: In-flow children of a flex container are called flex items and are laid out using the flex layout model.
  • Main-axis: The main axis of a flex container is the primary axis along which flex items are laid out.
  • Cross-Axis: The axis perpendicular to the main axis is called the cross axis.
  • Main start/end: The flex items are placed within the container starting on the main-start side and going toward the main-end side.
  • Cross start/end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

After of mention how works Flexbox behind the scene, now is the time of its properties for layout a web page, the following image shows a recap of the properties for Flex-container and Flex-layout:

Flex Container

DisplayFlexIt enables a flex context for all its direct children.
Flex-directionFlex-row / Row / reverse / Flex-column / column-reverseIts property establishes laying out the items in horizontal rows or vertical columns.
Flex-wrapWrap / nowrapflex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.
Flex-flowThis is a shorthand for the flex-direction and flex-wrap
Justify-contentStart / End / Center / Space-between / Space-aroundThis defines the alignment along the main axis. It helps distribute extra free space
Align-itemsStart / End / Center / StretchThis defines the default behavior for how flex items are laid out along the cross axis.
Align-contentStart / End / Center / Space-between / Space-aroundThis aligns a flex container lines within when there is extra space in the cross-axis.
Figure 2. Flex Container properties

Flex Items

OrderNumberThe order property controls the order in which they appear in the flex container.
Flex-growNumberThis defines the ability for a flex item to grow if necessary.
Flex-shrinkNumberThis defines the ability for a flex item to shrink if necessary.
Flex-basisWidth (px, vh, %, etc)
This defines the default size of an element before the remaining space is distributed
Flexnone | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]This is the shorthand for flex-grow, flex-shrink and flex-basis combined.
Figure 3. Flex Items properties

💥 Time to Practice 💥

The following code is a small web page about Pokemon! ✌ but first, open the project in order to see how we can use the properties to layout our web page. Go to the project 👀 on Play Code

Figure 4. Screenshot Flexbox items with Pokemon icons

As you can see, our web page has a header, nav, section, and footer so I am going to show some properties in practice with a Pokemon list:

section { flex-direction: row }

Figure 5. Default value. The flexible items are displayed horizontally, as a row.

section { flex-direction: column }

Figure 6. The flexible items are displayed vertically, as a column.

section { flex-wrap: wrap}

Figure 7. It property specifies whether the flex items should wrap or not.

section { justify-content: flex-end}

Figure 8. It property is used to align the flex items:

section { align-content: flex-end}

Figure 9. It Pack flex items from the end
nav div { flex-shrink: 2}
Figure 10. property specifies how the item will shrink relative to the rest of the flexible items

nav div { flex-basis: 150px}

Figure 11. property specifies the initial length of a flexible item.

I invite you to change the values of the properties and see the different effect over the elements, please felt free to share or comment on this post, this really is a help me to improve my redaction, code, and experience with the code and remember that the code is an art 🎨 and Flexbox module can allows you create a cleaner application 😀.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s