Flexbox & Properties

In the past, CSS layouts have been a huge pain point for web designers. In order to create a responsive layout, multiple divs have to be used throughout the HTML, and then the CSS needs to be modified to accommodate that. Flexbox is a way to create responsive layouts without this problem. Here's an intro on what flexbox is and how it works.

display

This states a flex container.
It enables flex context of all it's children.
It can be inline or block
```
.div{
 display: flex;
}
```

flex-direction

It defines the direction of flex, items placed in a flex container.

It is a single-direction layout concept.

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

row (default): left to right in ltr; right to left
row-reverse: right to left in ltr; left to right
column: same as row but top to bottom
column-reverse: same as row-reverse but bottom to top

flex-wrap

By default, items will try to be fit in one line.

.container {
 flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap - all flex items will be on one line
wrap - flex items will wrap onto multiple lines, from top to bottom.
wrap-reverse - flex items will wrap onto multiple lines from bottom to top.

flex-flow

It is a shorthand for flex-wrap and flex-direction properties and they together defines the cross axes of the main container
```
.container {
flex-flow: column wrap;
}
```

flex-shrink

It defines the ability for flex item to shrink accordingly
```
.item {
flex-shrink: 3; /* default 1 */
}
```
Make sure negative numbers are invalid

align-self

It allows the default alignment needs to be overridden for a flex item

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

order

.item {
  order: 5; /* default is 0 */
}

Let’s connect

If you found my content helpful and would like to thank me, feel free to Buy me a coffee :)

Have a great day!

Cover image: CSS Tricks

Dhairya Shah's Blog