How to Flexbox

How to Flexbox - Basics

Terminology

• Flex Container - Parent element (defined by the display property).
• Flex Child/Item - Every child of a Flex Container is a Flex Item.
• Main axis - The main axis of a flex container is the primary axis along which flex items are laid out. It is not necessarily horizontal (depends on the flex-direction property).
• Cross axis - The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

Properties to be used on parent's containers

• display: flex;
• flex-direction: row (default) | row-reverse | column | column-reverse
• flex-wrap: nowrap (default) | wrap | wrap-reverse
• justify-content: flex-start (default) | flex-end | center | space-between | space-around
• align-items: flex-start | flex-end | center | baseline | stretch (default)
• align-content: flex-start | flex-end | center | space-between | space-around (default)

• display: flex;- Just defines the context
• flex-direction - Defines the direction of the flex items
• flex-wrap - Defines if flex items will all try to fit onto one line
• justify-content - Align flex items in the maix axis (ex: if direction is row it will align horizontally)
• align-items - Align flex items in the cross axis (ex: if direction is row it will align vertically)
• align-content - This aligns a flex container's lines within when there is extra space in the cross-axis

Properties to be used on children items

• order: number (default -> source order)
• flex-grow: number (default -> 0)
• flex-shrink: number (default -> 1)
• flex-basis: length> | auto (default)
• flex: 0 1 auto (default)
• align-self: auto | flex-start | flex-end | center | baseline

• order: - Controls the order in which item appear in the flex container
• flex-grow: - This defines the ability for a flex item to grow if necessary
• flex-shrink: - This defines the ability for a flex item to shrink if necessary
• flex-basis: - This defines the default size of an element before the remaining space is distributed
• flex: flex-grow, flex-shrink and flex-basis combined in this order
• align-self: This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Basic Grids

Example 1: Basic Grids

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row.

Html

If you want to divide in equal parts just keep adding the div with the flex-child class inside the container

Ex: If you want to divide in 2 sections just add inside the container 2 div's with flex-child class

                        <div class="container">
                            <div class="flex-child">
                                // 1st Div
                                // Write your Code here
                            </div>
                            <div class="flex-child">
                                // 2nd Div
                                // Write your Code here
                            </div >
                        </div >
                    

Css

                        .container {
                            display: flex;
                        }

                        .flex-child {
                            flex: 1;
                        }
                    

Example 2: Individual Sizing

If you want that some div's have a fixed width and others to distribute space, just control this with flex property on the child divs.

Just tell to the div that you don't want it to grow or shrink (flex-grow: 0, flex-shrink:0), and then just control the width with the flex-basis in pixels or percentage (Ex: flex-basis:50%).

Use the shortand: flex: 0 0 50%;

To other div's just use the flex-child class and let them distribute the space (flex:1). If you want 1 bigger then the other but not with a fixed width, just increase the flex-grow of that div (Ex: flex:3)

Note: This flex:3 above don't mean the triple. Check how flex-grow works

(Resize browser)

Html

Code for 1st container

                        <div class="container">
                            <div class="fixed-flex-child">
                                // Fixed Div
                                // Write your Code here
                            </div>
                            <div class="flex-child">
                                // auto
                                // Write your Code here
                            </div >
                            <div class="flex-child">
                                // auto
                                // Write your Code here
                            </div >
                        </div >
                    

Css

                        .container {
                            display: flex;
                        }

                        .fixed-flex-child {
                            flex: 0 0 50%;
                        }

                        .flex-child {
                            flex: 1;
                        }
                    

Example 3: Responsive

The cells below should be full width by default and scaled to fit above some value (This example 1000px)

To achieve this just use flex-wrap on the parent container and with media queries combined with flex-basis property

(Resize your browser to see them in action)

Html

Code for 1st container

                        <div class="container">
                            <div class="flex-child">
                                // Write your Code here
                            </div>
                            <div class="flex-child">
                                // Write your Code here
                            </div >
                        </div >
                    

Css

                        .container {
                            display: flex;
                            flex-wrap : wrap;
                        }

                        .flex-child {
                            flex-grow: 1;
                        }

                        @media only screen and (max-width: 1000px) {
                            .flex-child {
                                flex-basis: 100%;
                            }
                        }
                    

Layout's

How flex-grow and flex-shrink really works?

Flex-grow/Flex-shrink

A flex container distributes free space to its items (proportionally to their flex grow factor) to fill the containers, or shrinks them (proportionally to their flex shrink factor) to prevent overflow.

Example for flex-grow, flex-shrink works with the same principle

Was applied flex-grow:2 on the Section div and flex-grow:1 on the Aside div

Calculations

• Container width: 300px
• Section width: 55px
• Aside width: 100px

Calculate the remaining space: 300-55-100 = 145px

Determine the value of one flex-grow factor, once we have 3 (2 + 1) the value of one flex-grow is approximately: 145/3 = 48px

Finally the sliced up remaining space gets distributed between all elements based on their flex-grow value:

• Section width: 55 (initial width) + ( 2(flex-grow) * 48(value of each flex-grow) ) = 151px
• Aside width: 100 (initial width) + ( 1(flex-grow) * 48(value of each flex-grow) ) = 148px

Flex-basis

The initial main size of the flex item, before free space is distributed according to the flex factors.