DEV Community

loading...

My 3 tips about Flexbox that will make your CSS better

Stas Melnikov
Updated on ・3 min read

When I check CSS of projects I often face some mistakes that are related to Flexbox. I'd like to tell about them in this post so that you didn't do them.

justify-content vs column-gap

I'm tired to see that developers use the space-between or space-around value to position the grid's elements. It's a bad practice that leads to incorrect displaying. When people do that they don't think that number of items may be changed.

For example, if add more elements in a grid from 4 columns they will not be displayed at the start of the line. Thus I see the broken grids.

There is a nice approach using the column-gap property. This property with Flexbox and you can just define a gap between of elements. And browsers will do all the rest of the work. So you'll get safe grids with any number of elements.

don't do this

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}
Enter fullscreen mode Exit fullscreen mode

justify-content and align-items vs margin: auto

When we solve issues of alignment we like to use alignment properties such as justify-content or align-items. But few people know these properties can lead to losing data, particularly frequently, when vertical alignment.

This is due to how these properties work. This process includes the two terms. The first, the alignment container is an element to that you declare the alignment properties.

The second, the alignment subject is elements that are inside of the alignment container. The alignment properties affect them.

So there is the case when the alignment subjects' sizes are larger than the alignment container's sizes. In the default alignment mode, it'll lead to overflow and loss of data. So users will see the cropped element.

I created the example with the modal element to show this behavior. At first, the text is short. But when we make it more we lose the heading and the close button.

We can fix it using auto margins because it uses extra space to align elements and doesn't lead to overflow. Take a look at how elements are no longer lost.

don't do this

<div class="modal">
  <div class="modal__main"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

<div class="modal">
  <div class="modal__main"></div>
</div>
Enter fullscreen mode Exit fullscreen mode
.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

flex items are blockified

There is an important feature when we use flexbox. When you write display: flex for the element all its child elements (flex items) are blockified.

What does it mean? All flex items that are set the display property with the inline, inline-block, inline-flex, inline-grid, or inline-table values will be changed. The inline and inline-block will changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

So don't use the block, inline and inline-block values and your code will be saved clear.

don't do this

.grid {
  display: flex;
}

.item {
  display: block; /* inline or inline-block */
}
Enter fullscreen mode Exit fullscreen mode

You can use this instead

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

P.S.
If you like my post you can say thank you using one from the following ways:
💰 Support me on Patreon: https://www.patreon.com/melnik909
👘 Buy my merch for frontenders: https://www.redbubble.com/shop/ap/79109127

P.S.S. This post was written with the support of my patrons: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Vlad Bazhanov, Spiridon Konofaos, Jesse Willard, Tanya Ten.

Discussion (6)

Collapse
inkyquill profile image
Inky Quill

I would like to mention, that the first suggestion will be good in future, but for now we are using other hacks. Why? Because on the last project we found out that a lot of Apple devices just can't understand gaps. That's why we changed all gaps to margins. Look at the data from caniuse before trying new sexy css properties.

Collapse
pavelloz profile image
Paweł Kowalski

I think they just introduced fixes to that... so soon ;)

Collapse
thethirdrace profile image
TheThirdRace

There are a couple problems with the first example:

  • As pointed out by @inkyquill , column-gap leaves out about 27% of users according to caniuse.com. So it's really not a good idea yet...
  • I would never give a .grid class to a flexbox, it's the surest way to confuse everyone...
  • Why is it even a flexbox instead of a grid?
Collapse
iiianous profile image
Ian Mostar

Did not know aligning items vertically and horizontally. cool! Also quite hesitant to use the first tip "column-gap" because it not quite supported yet especially if you build site for medium to large companies. but overall awesome tips.

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
viovelros profile image
viovelros

You can check again 4 images in his example.
The 2nd and 4th images have long content.
The 2nd image has the content be cropped in the top and bottom side.
The 4th image has the content be cropped in the bottom side only.

So ww need to follow the good way to show the content same as the 3rd and 4th images.

Forem Open with the Forem app