Learn CSS Flexbox

Learn CSS Flexbox

CSS Flexbox

Finally, you want to know about Flexbox, The CSS3 flexbox is used to make the elements behave predictably when used with different screen sizes and display devices. It provides a more efficient way to layout, align and distribute space among items in the container. we apply flex property to containers and flex items.

for flex parent Element (Container)

display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

for flex property applied to items/elements in a container

order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/* without any flexbox property */

.container { 

}

output -:

Screenshot (67).png

Each div has defaulted to display: block. Each square thus takes up the entire width of its line.

Now we will learn some important flex container properties but before we need to understand, a Flexbox container has two axes: a main axis and a cross axis, which default to looking like this:

main axis.png

In order to get started with Flexbox, you need to make your container into a flex container. Now we will learn some important flexbox container properties and how to center items

  • Flex property

What is the default direction in the Flex container - Items display in a row (the flex-direction property's default is a row ). The items start from the start edge of the main axis. The items do not stretch on the main dimension but can shrink

.container { 
    display: flex;
}

Screenshot (69).png

  • Flex-direction property

.container { 

    display: flex;
    flex-direction: row;

}

Screenshot (69).png

.container { 

    display: flex;
    flex-direction: row-reverse;

}

Screenshot (91).png

.container { 

    display: flex;
    flex-direction: column;

}

Screenshot (67).png


.container { 

    display: flex;
    flex-direction: column-reverse;

}

Screenshot (90).png

  • Justify-content

Justify-content arranged items on the main axis.

justify-content:flex-start;

.container { 

    display: flex;
    justify-content:flex-start;
}

Screenshot (69).png

justify-content:center

.container { 

    display: flex;
    flex-direction:row;
     justify-content:center;
}

Screenshot (71).png

justify-content:flex-end

.container { 

    display: flex;
    flex-direction: row;
    justify-content:flex-end;
}

Screenshot (73).png

justify-content: space-between

.container { 

display: flex;
flex-direction: row;
justify-content: space-between;

}

Screenshot (80).png

space-around

.container { 

display: flex;
flex-direction: row;
justify-content:space-around;

}

Screenshot (81).png

space-evenly

.container { 

display: flex;
flex-direction: row;
justify-content:space-evenly;

}

Screenshot (83).png

  • align-items

In align-items arranged items on the cross-axis. The first three are exactly the same as justify-content, so nothing too fancy here. As justify-content works along the main axis, align-items apply to the cross-axis.

.container { 

    display: flex;
    flex-direction: row;
    align-items:flex-end;
}

Screenshot (79).png

.container { 

    display: flex;
    flex-direction: row;
    align-items:center;
}

Screenshot (78).png

.container {                        

    display: flex;
    flex-direction: row;
    align-items:flex-start;
}

Screenshot (69).png

Now time to what the difference between align-items and justify-content, as we know in the justify-content property items are arranged on the main axis (It depends on which flex-direction of the container ) on the other hand align-items arranged items on the cross axis ( again it depends on container direction).

Now we will learn how to center all items with the help of flexbox.

.container { 

display: flex;
flex-direction:row;
justify-content:center;
align-items:center;

}

On direction row

Screenshot (95).png

.container { 

    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    }

on direction column

Screenshot (94).png

you can see all the items in the center horizontally and vertically this is all possible because of the cross-axis and main-axis.

Did you find this article valuable?

Support Pranit Ingole by becoming a sponsor. Any amount is appreciated!