CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will “flex” to different sizes to fill the space.
There were four layout modes:
- Block, for sections in a webpage
- Inline, for text
- Table, for two-dimensional table data
- Positioned, for explicit position of an element
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
CSS Flex Container
The element on which
display: flex or
display: inline-flex is applied becomes a flex formatting context for the containing box’s children, known as the flex container. Once we have created a flex container (by adding a
display: flex or
display: inline-flex), we need to learn how to manipulate the layout of the container’s children.
The flex container becomes flexible by setting the
display property to flex:
To create a flex container, we set the value of the area’s container’s
display property to
The flex container properties are:
The flex-direction Property
If you want your layout to go from top to bottom, left to right, right to left, or even bottom to top, you can use
flex-direction it to control the main axis along which the flex items get laid out.
Shows the four values of, including
The column value stacks the flex items vertically (from top to bottom):
The column-reverse value stacks the flex items vertically (but from bottom to top):
The row value stacks the flex items horizontally (from left to right):
The row-reverse value stacks the flex items horizontally (but from right to left):
The flex-wrap Property
The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.
The default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrap in single lines.
This property is used to break the flex item into multiples lines. It makes flex items wrap to multiple lines according to flex item width.
This property is used to reverse the flow of the flex items when they wrap to new lines.
The justify-content Property
The justify-content property in CSS is used to describe the align of the flexible box container. It contains the space between and around content items along the main axis of a flex container is distributed in a browser.
This property cannot be used to describe items or containers along the vertical axis.
The align-items Property
The align-items property is used to set the alignment of items inside the flexible container or in the given window. It aligns the Flex Items across the axis. The align-self property is used to override the align-items property.