Flexbox Unwrapped: Understanding CSS Flex

Table of Contents:

1. What is Flexbox?

2. Flexbox Terminologies

3. Flex Containers & Items

4. Flexbox Properties

What is Flexbox?

Flexbox is a valuable tool for creating layouts on a webpage, utilizing both the cross-axis and main-axis within flex containers.

Flexbox Terminologies:

Flex Containers & Items:

Flex container -

A Flex Container is any HTML element that has display: flex applied to it. It acts as the parent element that enables flexbox layout behavior for its children (the flex items).

Flex Items -

Flex items are the direct children of a flex container. They can be arranged and manipulated within the flex container according to flexbox properties.

<div class=container>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div> 
  <div class="item">Item 3</div>
</div>

.container{
   display: flex;
}

Flexbox Properties:

Flex-Container Properties-

These properties are applied to the flex container and control the layout of its children (flex items).

.container{
   display: flex; /* inline-flex */
}

Items Properties-

These properties are applied to individual flex items, allowing for detailed control over their alignment and size within the flex container.