Flexbox is also a type of container like div. However, it provides dynamic scaling of elements. This is because it can grow, shrink and align the items inside it which give better control to the programmer over the contents and styling of the items inside the container.
<aside>
💡 Quick facts of flexbox;
- It is 1-dimensional i.e. elements in flexbox can be arranged in either row(default) or column
- Has 2 axes → main and cross axis
</aside>
Applications of flexbox:
- Search bar
- Navigation bar
- Image gallery
- Bar charts
A Complete Guide to Flexbox | CSS-Tricks
Alignment Properties
- justify-content → For item alignment on main-axis (horizontally)
- flex-wrap → The default for this property is ‘nowrap’ which means the items will span the entire width of the axis.
- flex-direction → This property is used to set the main axis, which is a ‘row’ by default. It basically means you are changing your ‘main’ axis from horizontal rows to vertical columns.
- align-items → For item alignment on cross-axis (vertically)
- align-self → For unique flex items on cross axis
- gap → gap property can be used to create space between the items along the main axis. You can also individually configure the gaps in rows and columns using row-gap and column-gap properties.
- align-content → Used for packing flex lines and control over space
- flex-grow, flex-shirnk, flex-basis → Together these determine how the flex takes up space, grows or shrinks according to the space available.
Units of measurement