CSS Flexbox is one of the display properties of CSS which makes it easy for making CSS layouts convenient or easily inside a container also making it responsive and mobile-friendly. CSS flexbox was introduced in CSS 3. For using flexbox first you need to set the display of the parent element to flexbox. Suppose there are three article elements inside the section element in HTML, making the section element as the parent element. So for positioning the article elements properly and in a convenient way the parent element .i.e the section element should have display property of flex. The section element stay's as the block element, but its children .i.e. the articles element acts as the flexbox.
section {
display: flex;
}
The Flex Model
The flex items generally work in two axes, the cross axis, and the main axis. The cross axis is the vertical axis or we can say Y-axis in 2D representation and the main axis is the horizontal axis or we can say X-axis in 2D representation.
The parent element which has a display property of flex is known as flex container. And the items inside the flex container are known as flex items.
Flexbox Properties
I am mainly going to discuss the flexbox properties of the parent container, having one to many child elements.
Flex-direction
This property sets the direction of the main axis of the child elements. It's either setting the child elements in a horizontal or vertical direction or rows or columns inside the parent container.
section {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}
Flex direction has got four options
row (default): left to right
row-reverse: right to left
column:top to bottom
column-reverse: bottom to top
Flex-Wrap
By default flex items will try to fit into one line inside the container. We can change that by using flex-wrap.
section {
display: flex;
flex--wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap has four properties-
nowrap (default): all flex items will be on one line inside the container
wrap: flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse: flex items will wrap onto multiple lines from bottom to top.
Justify-Content
Justify content defines the alignment of the flex items on the main axis. It distributes the space available evenly or we can change the position of flex items at the start or end.
section {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around ;
}
The options for justify-content are-
flex-start (default): items are packed toward the start of the main axis.
flex-end: items are packed toward the end of the main axis.
center: items are centered on the main axis.
space-around: flex items are distributed on the main axis with equal space around.
space-between: flex items are distributed along the main axis with equal space between them.
Align-Items
The align-items arrange the flex elements on the cross axis.
section {
display: flex;
align-items: stretch | flex-start | flex-end | center;
}
There are four options for align-items.
flex-start: items are placed at the start of the cross axis.
flex-end: items are placed at the end of the cross axis.
center: items are centered in the cross-axis.
stretch: items stretches to fill the container.
Align-Content
Align-content lines the element inside the cross-axis when there is extra space available.
section {
display: flex;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
The properties of align-content are-
flex-start: Items are placed at the starting of the cross axis.
flex-end: Items are placed at the end of the cross axis.
center: Items are placed at the center of the cross-axis.
space-between: items evenly distributed;
space-around: items evenly distributed with equal space around each line.
stretch: items stretch to take the remaining space.
These are few properties of flexbox to help you get started with it. You will now be able to center a div. You can play the game Flexbox Froggy to learn about flexbox. Pasting some links, which will help to understand flexbox better.
Flexbox Froggy- https://flexboxfroggy.com/
MDN docs- https://developer.mozilla.org/en- US/docs/Learn/CSS/CSS_layout/Flexbox
CSS tricks- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Image credit to their respective owners.