# 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