CSS 101 - Flexbox

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing.

Flexbox

Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as “flex container”) whereas the others are meant to be set on the children (said “flex items”).

Flex container properties

Here a list of properties that apply to the container

This defines a flex container

.container {
    display: flex;
}

Flex direction
This property define the direction flex items are placed in the flex container:

• row (left to right)
• row-reverse (right to left)
• column (top to bottom)
• column-reverse (bottom to top)

.container {
    flex-direction: row; 
}

flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. (wrap, nowrap, wrap-reverse)

.container {
    flex-wrap: wrap; 
}

justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

flex-start    [- - -        ]
flex-end      [        - - -]
center        [    - - -    ]
space-between [-     -     -] 
space-around  [ -    -    - ]
space-evenly  [  -   -   -  ]

.container {
    justify-content: flex-start; 
}

align-items
This defines the default behavior for how flex items are laid out along the cross axis on the current line

flex-start 
[ ----- ]
[       ]
[       ]

flex-end 
[       ]
[       ]
[ ----- ]

center 
[       ]
[ ----- ]
[       ]

stretch 
[ | | | ]
[ | | | ]
[ | | | ]

.container {
    align-items: flex-start; 
}

Flex items properties

Here a list of properties that apply to individual item

Order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item {
  order: 5; 
}

flex-grow
This defines the ability for a flex item to grow if necessary

.item {
  flex-grow: 1; 

align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

For example if align-items is set to flex-start

[ ----- ]
[       ]
[       ]

Setting .item3 to:

.item3 {
  align-self: flex-end;
}

Will create this custom alignment:

[ -- -- ]
[       ]
[   _   ]

Conclusion

That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman