Table of contents
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 -:
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:
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;
}
Flex-direction property
.container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: row-reverse;
}
.container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-direction: column-reverse;
}
Justify-content
Justify-content arranged items on the main axis.
justify-content:flex-start;
.container {
display: flex;
justify-content:flex-start;
}
justify-content:center
.container {
display: flex;
flex-direction:row;
justify-content:center;
}
justify-content:flex-end
.container {
display: flex;
flex-direction: row;
justify-content:flex-end;
}
justify-content: space-between
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
space-around
.container {
display: flex;
flex-direction: row;
justify-content:space-around;
}
space-evenly
.container {
display: flex;
flex-direction: row;
justify-content:space-evenly;
}
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;
}
.container {
display: flex;
flex-direction: row;
align-items:center;
}
.container {
display: flex;
flex-direction: row;
align-items:flex-start;
}
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
.container {
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
on direction column
you can see all the items in the center horizontally and vertically this is all possible because of the cross-axis and main-axis.