DEV Community

Emi Castellano
Emi Castellano

Posted on

Hi FlexBox, nice to meet you πŸ™‚

What is FlexBox? πŸ€”

This tool provides an efficient way to lay out, align and distribute space among items in a container, even when we don't know each element size.

alt text

Browser compatibility βœ”

Nowadays, flexbox is supported by all modern browsers.


Concepts πŸ’‘

Consider the following image as a reference for the next concepts:

display
This property defines a flex container, so all container's children will have a flex context.

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

flex-direction
Using this property we set the main-axis. Flexbox is single-direction, so we can show our items in horizontal rows or vertical columns.


.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
Enter fullscreen mode Exit fullscreen mode

order
With Flexbox we can change the order of each item inside the container, using order attribute. By default, we'll see the same order displayed on our HTML.


.container {
  display: flex;
}
.item {
  order: <integer>;
}
Enter fullscreen mode Exit fullscreen mode

flex-grow
This attribute defines what amount of the available space inside our container the item should take. It's useful when we want to let an item grow if necessary.


.item {
  flex-grow: <number>; /* Default 0 */
}
Enter fullscreen mode Exit fullscreen mode

flex-wrap
Flexbox will always try to show all the items in one line. To prevent this, if necessary, we can use flex-wrap attribute.

nowrap - default value. Items in one line.
wrap - multiple lines from top to bottom.
wrap-reverse - multiple lines from bottom to top.

.container {
   flex-wrap: nowrap | wrap | wrap-reverse;
}
Enter fullscreen mode Exit fullscreen mode

flex-shrink
This attribute defines the ability for an item to shrink.


.item {
   flex-shrink: <number>; /* Default 1 */
}
Enter fullscreen mode Exit fullscreen mode

flex
Using this property we can avoid using flex-grow, flex-shrink and flex-basis. The second parameter is flex-shrink, the third parameter is flex-basis. Default 0 1 auto.

.item{
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
}
Enter fullscreen mode Exit fullscreen mode

justify-content
With this attribute, we define the container's children alignment along the main axis.

flex-start - default value. Items aligned to the left.
flex-end - items aligned to the right.
center - items centered
space-between - items evenly distributed in the line. First item on the left, last item on the right.
space-around - items evenly distributed with equal space around them.
space-evenly - equal space between two items.

.container {
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Enter fullscreen mode Exit fullscreen mode

align-items
Define how our items will behave on the opposite axis to the main axis. (It's always perpendicular)

flex-end - cross-end margin edge of the items is placed on the cross-end line
flex-start - cross-start margin edge of the items is placed on the cross-start line
stretch - default - fill the container considering min-width/max-width
center - items centered
baseline - items aligned based on their baselines align

.container {
   align-items: stretch | flex-start | flex-end | center | baseline;
}
Enter fullscreen mode Exit fullscreen mode

align-self
Using this attribute we can override the default alignment for a specific item.


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

align-content
We can use this attribute to align container's lines within when there is extra space in the cross-axis.

Pro tip: use this attribute only when there is more than one line of items inside your container.

stretch - default - the content will take up the remaining space
flex-start - lines aligned to the start of the container
flex-end - lines aligned to the end of the container
center - lines aligned to the center
space-between - lines evenly distributed, first line is at the start and last line is at the end of the container
space-around - lines evenly distributed with equal space around them

.container {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Enter fullscreen mode Exit fullscreen mode

Playground πŸ‘¨β€πŸ’»

Are you curious? Give it a try, play with it.

Thanks πŸ™Œ

Hope this article helps you. Feel free to contact me if you have any question.

Top comments (4)

Collapse
 
bertilmuth profile image
Bertil Muth

Good article to get an overview, especially the graphics. One thing I noticed: the code for flex-grow refers to order.

Collapse
 
emi_castellano profile image
Emi Castellano

Thanks for your feedback! 😁
Good catch, I've already fix it.

Collapse
 
bertilmuth profile image
Bertil Muth

Great!

Collapse
 
georgecoldham profile image
George • Edited