---
# System prepended metadata

title: FLEXBOX

---

#  FLEXBOX

Flex box also known as flexible box (module) layout is a CSS layout sysyem designed to help you arrange your tems in a row or column, which is a one dimentional system that controls spacing, alignment, and order all without using floats or complicated positioning. 

Think of flexbox like a smart container that automatically distributes space among items and keeps layouts responsive.

## Basic concept of Flexbox
Flexbox works with two main parts:
* Flex container
   the parent element that holds the flex-items.
* Flex items 
  the child element inside the container.

### Flex Direction(main axis)
This shows the direction of items in rows 
* main axis : direction items flow in row
* cross axis : direction items flow in column
```
.container{
display: flex;
flex-direction:row;
}
```
Values and meaning:
* row: horizontal(defualt)
* column: vertical
* row-reverse: reverse horizontal
* column-reverse: reverse vertical
 
### Justify content(main axis alignment)
this controls how item align along the main aixs
```
.container{
justify-content:center:
}
```
### Align items(cross axis alignment)
controls alignment vertically
```
.container{
align items:center;
}
```
### Flex wrap(multiple lines)
By defualt, items try to stay in multiple lines
```
.container{
flex-wrap:wrap;
}

```
## Flex item properties
this only apply to the child elements
### Flex-grow
this controls how much an element grow
```
.box{
flex-grow:1;
}

item 1 grows
```
### Flex-shrink
this controls shrinking when space is small
```
.box{
flex-shrink:1;
}

item 1 shriks
```
## Why flexbox is powerful
flexbox helps you:
* center elementseasily
* build responsive laoyouts
* create navugation bars
* align items perfectly
* avoid floats and hacks
* control spacingg dynamically
