Koustav Chatterjee's Blog
CSS Flexbox: Flex your CSS skills

CSS Flexbox: Flex your CSS skills

Koustav Chatterjee's photo
Koustav Chatterjee
·

3 min read

In order to achieve to responsive design in a website flexbox is an important property provided in CSS. In this blog, we will learn the basics of flexbox.

What is Flexbox?

Flexbox, short for Flexible Box Layout, is a CSS layout model optimized for distributing space along a single axis (either horizontal or vertical). It is ideal for creating responsive designs and aligning items within a container.

  1. Main axis: The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property. When we use justify-content attribute it is applied on this axis.

  2. Cross axis: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction. When we use align-items property, it is applied on this axis.

  3. Flex container: The parent element where Flexbox is applied.

  4. Flex items: The direct child elements of the flex container.

Flex box properties

  1. To apply flex box on the children of any div or container we need to set the display of that element as flex.
.container{
    display: flex;
}

This defines a flex container; inline or block depending on the given value.

  1. Flex-direction: This determines the direction of the main axis.

     .container {
   flex-direction: row | row-reverse | column | column-reverse;
 }

  2. Flex items: By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. By default it has a value of 0.

     .item {
   order: 5; 
 }

  3. Justify-content: It is generally applied on main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

     .container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
 }

    • flex-start (default): items are packed toward the start of the flex-direction.

    • flex-end: items are packed toward the end of the flex-direction.

    • start: items are packed toward the start of the writing-mode direction.

    • end: items are packed toward the end of the writing-mode direction.

  4. Align-items: It is generally applied on cross axis.

     .container {
   align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
 }

    • flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.

    • flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.

    • center: items are centered in the cross-axis

These are some basic flexbox properties and there’s a ton of them which one can explore. here’s some useful resources to learn flexbox:

  1. CSS Flexbox Layout Guide | CSS-Tricks

  2. Flexbox Froggy - A game for learning CSS flexbox

Conclusion:

Flexbox is a must-have tool in every web developer's toolkit. By mastering its properties and understanding its behavior, you can create modern, responsive layouts with less effort. Experiment with the examples above, and you’ll soon find Flexbox indispensable for your CSS workflows.

ChaiCodeflexboxCSS