CSS Flex Box

Tools to use

What's CSS FlexBox?

🤔

CSS Flex-box is an efficient way to layout, align and distribute space among elements(child elements) in a container(parent element).

Flex-Contianer
Flex-items

Flexbox Overview👉

💡💡💡

Flex-box Properties

#container{
   display: flex;
}

Turns a an element into a flex box

#container{
   display: flex;
   justify-content: space-between | space-around | center;
}

#container{
   display: flex;
   align-items: center | flex-start | flex-end;
}

Justify-content 🤞

align-items 🤞

Always add multiple elements into a container

These help to group elements on the Page to easily work with flex-box

👇

Containers Include:

header
div
footer

** The End **

Made with Slides.com