# 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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1751358169179/0f0a2fe0-5505-4fcc-a12b-ccebc1ed0881.png align="center")

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

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

```css
.container{
   display: flex;
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1751359227504/f95e3351-a898-4518-b0e8-c620c32a1558.png align="center")

## Flexbox Properties:

### Flex-Container Properties-

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

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1751362306819/9e7efd13-f400-4070-8b4a-c5fe4f442b9c.png align="center")

### Items Properties-

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