BUILDING RESPONSIVE PAGES USING FLEXBOX

1- What is CSS FlexBox?
Flexbox is a CSS3 layout model to create a responsive page enabling the elements of the container to fit with every screen size without struggling with position and float. As a direction-agnostic layout algorithm, flexbox is free from any directional constraints in contrast to the block model and inline model that are vertically-biased, and horizontally-biased respectively. While the CSS flexbox is a one-directional layout working with either a row or a column, the CSS Grid is a two-dimensional layout capable of working with both rows and columns at the same time. The former layout is mostly applied for an application or a small-layout, and the latter is suitable for large-scale layouts.
If you want to benefit from flexbox power, this article will guide you step by step all through this way from the prerequisite concepts to flexbox features. Also, you can see my blog article to learn more about CSS grid.

2- Terminology and Core Concepts

Flexbox model is based on two perpendicular axes -main axis and cross axis- on which the flex items will be laid out depending on the values of the Flexbox properties.
axis:

• main-axis: The primary axis of a container is the main axis on which all the child items are laid out, and the flex-direction property defines its direction.
• cross-axis: The cross axis is perpendicular to the main axis. So, the cross axis is vertical if the main axis is horizontal and vice versa. properties:
• main-start | main-end: These properties show where the item placement starts and where the item placement ends on the main axis
• main size: The main-size of the container, depending on the horizontal or vertical direction, is determined by the width or the height of its largest item, respectively.
• cross-start | cross-end: These properties show where the item placement starts and where the item placement ends on the main axis
• cross size: The cross-size of the container, depending on the horizontal or vertical direction, is determined by the width or the height of its largest item, respectively.

3- Flex Container

After knowing the principle terminology of the flexbox, the next step is to create a container and set its value of display property to flex. This container is called a flex container containing the future children called flex items. The following code creates a flex container on which three flex items are laid out.
Code start:

.box { display: flex; }
<div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three
        <br>has
        <br>extra
        <br>text </div>
</div>

4- Flex Lines
A hypothetical line parallels the main axis, which enables flex items to be grouped, and aligned in their container is known as the flex line. A flex container can be a single-line in which all the children are laid out in a single line or multi-line in which the items are broken into multiple lines to prevent overflow.

5- Properties
I want to categorize properties into two sections of container-level properties that deal with the placement of the items in the container, and item-level properties that manipulate individual properties of each item inside the container.

5-1- Container-level properties
These properties deal with the placement, spacing, alignment, and justification of the items inside the container. The main container-level properties are mentioned in the below:

• Flex-direction: it defines the main axis direction using four possible values:
1- row (which is the default value, horizontal, left to right)
2- row-reverse (horizontal, right to left)
3- column (vertical, top to bottom)
4- column-reverse (vertical, bottom to top)

As you know, the cross axis is perpendicular to the chosen main axis now.

• Flex-wrap: this property defines whether the container is single-line or multi-line using three values:
1- nowrap (default): the single-line flex container can overflow
2- wrap: the flex items can wrap onto additional flex lines if there is no enough space in the first line.
3- wrap-reverse: Plays the same as the wrap does, but cross-start and cross-end are swapped

The cross-axis direction defines the order of stacking the lines on top of each other

• justify-content: You can use this property to align the flex items in the current line of the main axis through five values.
1- flex-start (default): Packs flex items from the beginning of the line.
2- flex-end: Packs the flex items from the end of the line.
3- center: Packs the flex items from the center of the line.
4- space-between: Evenly distributes flex items on the line.
5- space-around: Evenly distributes flex items on the line, with half-size spaces on either end.

• align-items: It aligns flex items on the cross axis via assigning the following values
1- flex-start: Packs the flex items from the cross-start of the line.
2- flex-end: Packs the flex items from the cross-end of the line.
3- center: Packs the flex items from the center of the line
4- baseline: Aligns the flex items by aligning their baselines.
5- stretch (default): Stretches the flex items from the cross-start to the cross-end;

• align-content: If there is extra space in the cross-axis, you can align the flex container lines within the same container applying the following values.
1- flex-start: Packs the lines from the cross-start of the flex container.
2- flex-end: Packs the lines from the cross-end of the flex container.
3- center: Packs the lines rom the center of the flex container.
4- space-between: Evenly distributes the lines in the flex container
5- space-around: Evenly distributes the lines in the flex container, with half-size spaces on either end.
6- stretch (default): Stretches the lines to fill the remaining space.

5-2- Item-level properties
These properties let you to manipulate the size of every individual item inside the container.
• flex-basis: As the value of width property, the flex-basis property defines the initial size of a flex item. While the default value of auto, absolute values, and percentages are applicable, negative values are invalid for this property.
• flex-grow: Also called as the flex-grow factor, this property could be assigned to expand the size of the items through remaining space of the container.
• flex-shrink: The size of the flex items could be shrined to fit when their size is larger than the flex container.
• flexbox shorthand: Three lines of coding for mentioned properties could be merged in a single line of coding by the use of the flexbox shorthand property.

This article is a guide to start your first experience of creating a flexbox layout. To Find more about CSS FlexBox and building responsive layouts with it, you can see full article on my blog.