DEV Community

Cover image for CSS 101 - Flexbox
Eric The Coder
Eric The Coder

Posted on

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

Flex container properties

Here a list of properties that apply to the container

This defines a flex container

.container {
    display: flex;
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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; 
}
Enter fullscreen mode Exit fullscreen mode

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

.item {
  flex-grow: 1; 
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)