×
  • 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?

    Entities

    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

    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>
    </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.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept