• CSS Flexbox – Complete Beginners Guide

  • Terminology Of Flexbox

    Lesson List

    In this lesson, let us take a look into the terminology of flexbox which is required to have a proper understanding of a flexbox and how it works?


    When we talk about flexbox we mainly have two entities.
    A parent container which we term as a flex container and the immediate children elements which we term as flex items.
    Terminology Of Flexbox : Entites
    If we take a look at a sample html

    <!-- container: flex Container -->
    <div class="container">
      <!-- item: Flex items -->
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>

    The parent div is a flex container and the children div’s are the flex items

    Flexbox Axis

    We also deal with two-axis when we are working with flexbox
    The Main Axis & Cross Axis
    Terminology Of Flexbox : Axis

    Main Axis

    By default, the main axis runs from left to right and the cross axis is perpendicular to the main axis and runs top to bottom.
    The start point of the man axis is termed as the main start and the endpoint is termed as the main end and the length between them is termed as the main size. so we can say that the flex item flows from the main start to the main end and take up the main size as a length.

    Cross Axis

    similarly, with cross-axis, we have a cross start, cross end, and cross size. we can also change the direction of main and cross-axis but we will talk more about it later in the course.

  • Enable Notifications    OK No thanks