DEV Community

cclintris
cclintris

Posted on

CSS: All about Flexbox

CSS: Flexbox

Intro

This article will be about a very important and useful CSS position attribute, the flex layout.

To understand flex, we can think of it as a box, a flexbox. A flexbox is especially useful when you want to arrange your elements in a certain row or column matter, and also make the elements in the flexbox automatically resize to suit with spaces around them.

Context

Main axis vs Cross axis

To understand flex, the first thing is to understand the concept of the main axis and cross axis.

Any element that uses the flex layout should be viewed as a "Flex container", every sub-element within the container is a flex item. A flex container has two default axis, a horizontal main axis and a vertical cross axis. The start of the main axis, starting from the left side of the container, is called main start, the point where it ends is called main end. Similar with cross axis, let's take a look at the picture below.

Image description

Container attributes

Below is all the listed attributes for the flex container and flex items. And we'll look at how every attribute works.

Flex container

For the flex container, there are six different attributes listed below:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction

flex-direction controls the direction of the main axis. It sets how the flex items arrange.

flex-direction: row | row-reverse | column | column-reverse;
Enter fullscreen mode Exit fullscreen mode
option description
row(default) Horizontal main axis, starts from the left
row-reverse Horizontal main axis, starts from the right
column Vertical main axis, starts from the top
column-reverse Vertical main axis, starts from the bottom

Image description

flex-wrap

As in default, all flex items stay in the same line horizontally, no matter if the flex items are given a width, it wouldn't change lines.

.main {
  width: 500px;
  height: 300px;
  background: skyblue;
  display: flex;
}

.main div {
  width: 100px;
  height: 100px;
  background: pink;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Notice that in this case, even we set the width of each div to 100px, the div's width has been resized to 500/7 px. In this case, we might want the flex items to change to the next line if there isn't enough space, therefore also making the width as wide as we assigned in code. flex-wrap helps us with this along with three options.

flex-wrap: nowrap | wrap | wrap-reverse;
Enter fullscreen mode Exit fullscreen mode
option description
nowrap(default) no newline
wrap newline, the first row is above
wrap-reverse newline, the first row is below

Image description

flex-flow

flex-flow is just a succinct way to combine the flex-direction and flex-wrap attribute in the following form, nothing more special:

flex-flow: <flex-direction>|| <flex-wrap>;
Enter fullscreen mode Exit fullscreen mode

justify-content

justify-content defines how flex items align according to the main axis.

justify-content: flex-start | flex-end | center | space-around | space-between |
  space-evenly;
Enter fullscreen mode Exit fullscreen mode
option description
flex-start(default) left aligned
flex-end right aligned
center centered
space-around two sides of each flex items equally spaced
space-between left and right aligned, and space between any two flex item equally spaced
space-evenly each space between any two flex item equal to the space between container and item itself

Here we show the case where flex-direction is default, which items should be horizontally arranged on the main axis.

Image description

align-items

align-items defines how flex items align according to the cross axis.

align-items: flex-start | flex-end | center | baseline | stretch;
Enter fullscreen mode Exit fullscreen mode
option description
flex-start cross-start aligned
flex-end cross-end aligned
center cross axis center aligned
baseline aligned based on the first line of flex item texts as the baseline
stretch(default) if flex items are not height set or set to auto, then the flex item will stretch till it fits the container

Image description

align-content

For this option, we can think of align-content as a multiple line version of align-items. So if the elements are only in one single line, this attribute will not make any difference.

align-content: flex-start | flex-end | center | space-between | space-around |
  stretch;
Enter fullscreen mode Exit fullscreen mode
option description
flex-start cross-start aligned
flex-end cross-end aligned
center cross axis center aligned
space-between cross-start and cross-end aligned, evenly spaced between each line
space-around two sides of each flex items equally spaced
stretch(default) flex item will stretch till it fits the container

Flex Item

After looking at how flex container works, next we should keep on digging, understand how flex items work within flex containers.

order

order indicates the sequence of flex items according to its container settings.

order: <integer>;
Enter fullscreen mode Exit fullscreen mode

Image description

flex-grow

flex-grow indicates how much of the space left should be assigned to a flex item. flex-grow has a max value of 1, default is 0.

flex-grow: <number>;
Enter fullscreen mode Exit fullscreen mode

Image description

flex-shrink

flex-shrink indicates how a flex item shrink. Notice that it is only when flex items' default width surpasses the container's width will this attribute take effect.

flex-shrink: <number>;
/* default 1 */
Enter fullscreen mode Exit fullscreen mode

Here I don't really want to say too much about flex-shrink, because it's really just not that useful.

flex-basis

flex-basis indicates the width of a flex-item on the main axis, where it prioritizes the default width of the item.

flex-basis: 0 | 100% | auto | <length>;
Enter fullscreen mode Exit fullscreen mode

If our css code is written as below:

.item {
  width: 400px;
  height: 300px;
  background: skyblue;
  display: flex;
  padding: 5px;
}

.item div {
  height: 100px;
  font-size: 20px;
  width: 200px;
  flex-basis: 300px;
  background: pink;
}
Enter fullscreen mode Exit fullscreen mode

It renders as below:

Image description

flex

flex is just an shorter combined version of flex-grow, flex-shrink and flex-basis. The last two options, flex-shrink and flex-basis are optional.

flex: none | [ < "flex-grow" >, < "flex-shrink" >? || < "flex-basis" >];
Enter fullscreen mode Exit fullscreen mode

align-self

align-self allows one single item to align differently with other items. It is able to override align-items. Its default value is auto, which indicates that it inherits its parent item's align-items. If there isn't a parent item, then its value will be stretch.

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

For example, if out css code written as below:

.item {
  width: 400px;
  height: 300px;
  background: skyblue;
  display: flex;
  padding: 5px;
}
.item div {
  height: 100px;
  width: 200px;
  flex-basis: 300px;
  font-size: 20px;
}
.item div:nth-child(1) {
  background: pink;
  align-self: flex-start;
}
.item div:nth-child(2) {
  background: violet;
  align-self: center;
}
.item div:nth-child(3) {
  background: greenyellow;
  align-self: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Then the three items will be rendered as below:

Image description

Conclusion

Above is all about flex in css. To conclude, flex is a very powerful layout in css that we often see and use, pretty much one of the most powerful and one of the most common used css tool.

Top comments (0)