Flexbox, or the Flexible Box Layout, is one of the most effective tools for designing flexible responsive layout structure without using float or positioning. It simplifies complex layouts in a way that is easier to understand and use.
Introduction to Flexbox
The flex container becomes flexible by setting the display property to flex.
.container {
display: flex;
}Once in this state, the flex container's children, or flex items, can be aligned vertically and horizontally with great ease.
Main Axis and Cross Axis
The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. So if elements are ordered from left to right, the main axis runs along the row and the cross axis runs down the columns.
Properties of the Flex Container
There are six properties that control the flex container:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Flex-Direction
The flex-direction property defines the direction of the main axis.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}Flex-Wrap
The flex-wrap property specifies whether flex items are forced onto one line or can wrap onto multiple lines.
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}Flexbox and Responsiveness
With the use of media queries, Flexbox becomes a powerful tool for creating responsive designs. By simply changing the direction of the main axis or allowing the flex items to wrap, you can create a layout that works across all screen sizes.
