What is CSS Flexbox ?

Flexbox CSS is a one dimensional layout model/method used for laying out items (HTML elements) in a row or column fashion (horizontal or vertical).

Why Flexbox CSS?

Long gone are the days of using float and position in CSS to create layouts and responsive layouts. Utilising flexbox allows you to create fully responsive, mobile first layouts without needing to write lots of different media queries.

Just a review

When I was learning layout in CSS, alignment concepts were the most confusing part to me. I got it now but it took me a while to understand it completely.

I have created a simple cheat sheet for flexbox properties and their values with all possible details while learning, which I wanted to share with you all with this post.

How Flexbox Works

Like in any other grid-based design layout, we have to think of Flexbox in terms of axes, which would form the basic structure or skeleton of our user interface. And, as I had mentioned earlier, flex elements can be laid out in rows or columns; so, there are two axes: the main axis and cross axis. On these axes would then reside the flex container, which is the parent element or general area laid out using flexbox. Inside the flex container would be the flex items, which are the child items or rather the content of the container (text, images, anything). These flex items can then be moved around within the container depending on what we need. Flexbox's 1D feature allows for the placement of flex items either horizontally (row) or vertically (column). Our main axis would be the axis that the flex items are positioned along, and the cross axis would be the axis that is perpendicular to our main axis. The horizontal axis is the major axis because in the preceding image our objects are arranged in a row.

Properties of flex container

• Flex-direction
• Flex wrap
• Flex flow
• Justify content
• Align-items
• Align-content

Flex-direction

This parameter determines whether the flex-items are placed along a main axis vertically, horizontally, or both ways reversed. This requires 4 values.

• rows
• Column
• row-reverse
• Column-reverse.

Flex-wrap

The flex-wrap changes to accommodate the additional file components. When the number of things increases, it adjusts to fit all of the items on a single line, determining whether the aligned items will cross over to the next line. 3 values are required:

• Wrap: enables elements to split into numerous lines when a single line can no longer fit the default number of list items.
• Nowrap:To fit all items without moving to the next line, the container changes the width of the objects. Wrap-reverse enables flex-items to split into many lines in the opposite way.

Flex-flow

This is a shortcut for "flex-direction" and "flex-wrap," and its values can be understood as

• Row nowrap
• Row wrap
• Column wrap
• Column nowrap

Justify-content

This defines how flex items are laid out on the main axis. It takes 5 values;

• Flex-start : it is a default value for justify-content which places items towards the start of each flex line.
• Flex end : this places items at the end of the flex line.
• Center: places flex items in the center of the line.
• Space between: displays equal spacing between flex items.
• Space around: equal space around every item.
• Space evenly

Align-items

This is very similar to justify-content and is known to have 5 values;

• Flex-start:this places items at the start cross axis maintaining the(flex-direction) writing mode rule.
• Flex-end: the items are placed at the end of the cross axis . It still maintains flex-direction rule .
• Center: items are centered in the cross axis.
• Stretch:this makes the items to stretch to fill the container while maintaining the default width
• Baseline:it aligns items to have their content seat on their baseline.

Align-content

This is used on multiple-line flex container. it controls how items are aligned in a multi-line flex container just the way the wrap property works. It has about 4 values:

• Stretch: items are stretched to fit the available space along the axis.
• Flex-start: it aligns all items in the multi-line container to start of the cross-axis . Makes the items to be aligned to the top of the flex container.
• Flex-end : value aligns the flex items to the end of the cross axis (ie. the button of the flex container).
• Center: items are centered in the flex container.
• Space-between : items become evenly distributed with space between them from top-bottom of the flex container.
• Space-around: items are evenly distributed with space around them.