What is Flexbox?
Flexbox, short for Flexible Box Layout, is a CSS module that makes it easy to design flexible responsive layout structures without using float or positioning.
Live Flexbox Playground
1
2
3
4
5
Key Properties
- display: flex; – establishes a flex container.
- flex-direction – defines the main axis (row or column).
- justify-content – aligns items along the main axis.
- align-items – aligns items along the cross axis.
- flex-wrap – controls whether flex items wrap onto multiple lines.
- gap – adds spacing between flex items.
- Individual item controls:
flex-grow,flex-shrink,flex-basis,align-self.