Terminology Of Flexbox

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.

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

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.