# A Dip Into CSS Flexbox

Hello Fellow Codenewbies 👋

Recently I learned more about flexbox in CSS.
<br>
I will write this topic in several posts as I learn and dive into it 😊
<hr>

# Flexbox

> Flexbox is a layout model or displaying items in a **single dimension** — as a row or as a column.
<br>
-- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Glossary/Flexbox)

## Display Properties In CSS 
Elements normally have default `display: block` or `display: inline` from browsers.

**Block** stacks on top of each other.
<br>
Including in this element:
- `div`, `header`, `footer`, `main`, `section`, etc.
- heading (`h1` - `h6`)
- `p`

While **inline** stays within the flow.

- `a`
- `strong`
- `em`
- `span`

We can change the behavior of these elements. One of the methods is by setting `display: flex` on the *parent* element.


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

#### Result

![wo flex 1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607814407340/bUQ_uMCUg.jpeg)


![w flex 1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1607814303857/t2RUnHiZV.jpeg)

**✏ UPDATE**
<br>
The parent element is known as ***flex container***, and the elements inside flex container are ***flex item***.

## Flex Behaviour
- `display: flex` will automatically turn the elements inside the parent element into ***columns***. 
<br>
- When the total width of the children is bigger than the width of the parent, they will stretch to fit the *horizontal* axis of the parent element.

I provide an example below to play with.

%[https://codepen.io/adiati/pen/RwRvXJP]

Toggle the `display: flex` in the example and see how the elements inside flex-container behave and try also to play around with the width of the elements.

## Conclusion
- Each element have a default display property, either `display: block` or `display: inline`.
- When we apply `display: flex` to a parent element, by default, it will turn the elements inside it into ***columns***.