Flexboxes are amazing tools that can really spice up your HTML. Flexboxes are commonly used as buttons, containers, forms, and navigation bars throughout the web due to their flexibility as a CSS tool. Once you start using them, there's no way to go back!

You Soon

I've worked with flexboxes a lot throughout my time designing websites. They come in handy in many cases, but they can also be finicky to use for beginners. Let's go over some common use cases of flexboxes and the issues flexbox users commonly face.

The Flexbox

Before discussing what problems flexbox has, let's look at what a flexbox is and how you use it in your CSS briefly.

First, you use the flexbox by adding the following line to any element you wish. Flexboxes are most commonly used in div elements.

display: flex;

This line will turn any element you have into a flexbox, giving it some wonderful properties. A flexbox can:

  • Change its size according to its content
  • Change its size according to the remaining space in the parent container
  • Host other flexboxes or containers and arrange them in multiple ways
  • Change its own position and the position of its child containers based on the remaining space

These properties allow the flexbox to break free of inline positioning and sizing and give the designer flexibility in how the content is presented to the user.

I won't go over all the details of flexboxes, but the four points above are important to understand when troubleshooting your flexbox. So, let's get started.

Problem: Items in Flexbox Aren't Centred Properly

The most common use case of the flexbox is to centre content within it without any hassle. Usually, when you have to centre some text inside of an element with a fixed height, you first use text-align: center to centre the text vertically, and then you set the line-height of the text to the height of the parent container which centres the text horizontally.

That works well for fixed height containers and text, but what if you have a container with a variable height or if you want to centre other things than text? This is where you would set the parent container to a flexbox display and add the following lines.

align-items: center;
justify-content: center;

Viola, your text is now centred. But what if it doesn't work? Then one of the following might be the case.

Your Child Flexbox Has Variable Height

The most common problem is that you might have a child element that you want to centre, but it has a height: auto, min-height: auto, or height: 100% property. This creates a problem because your parent flexbox will try to centre your child container, but the child container will simply take up all the space in your parent container without centring its own content.

Possible fixes for this are;

  • Remove variable height for the child container.
  • If ¬†that is not possible, turn your child container into a flexbox and add align-items and justify-content rules to it.

Your Child Container Has an align-self Property

align-self is a property that breaks the child container from the positioning of the parent container so that it can control its position from within the child container. It is a useful property, however, it is also a common reason for items not being centred correctly.

Possible fixes for this are;

  • Remove the align-self property from the child container
  • If that is not possible, use another flexbox that wraps your child container, align the new flexbox based on how the child was positioned, and then centre the child inside the new flexbox.

Other common problems are:

  1. Your flex-direction is wrongly set.
  2. You are using align-content and justify-items. The proper code for centring is align-items and justify-content.
  3. Your settings for gap, row-gap, or column-gap are interfering with the centring.

Problem: Child Containers Too Large or Too Small

Another common issue is child containers overflowing from the main flexbox or taking too much space in the flexbox. The most common reasons for this issue are improper usage of flex-grow, flex-shrink, or flex-basis.

Improper Usage of flex-grow and flex-shrink

These properties are used inside child containers to allow them to resize themselves to fill in the gaps in the parent flexbox. The default value for both is 1.

If all the child elements in your flexbox have the same flex-grow property, they will simply distribute all the remaining space in the parent equally. However, if one container has a higher value, say flex-grow: 3, then it will try to take up three times as much space as a container with flex-grow: 1.

The same is the case with flex-shrink, which allows the child elements to know which element to shrink first and to what degree when the height or width of the parent element changes.

To fix this, check the flex-grow and flex-shrink properties of the child elements are oversized.

Your flex-basis Property is Being Overridden

flex-basis is the property that controls the size of the child element before flexbox resizing rules are applied to it. This means that all flexbox children start with flex-basis: auto, which allows the CSS to simply look at the width and height of the child container to set its size. However, if flex-basis is overridden, it can cause sizing issues.

To fix this, check the flex-basis of your child elements and either remove the property or set it to a more appropriate value.

Another common problem is the extra percentage in the height and width property of the child elements, like height: 120%, or width: 150%.

Conclusion

Flexboxes are wonderful tools for any web designer. Once you start using them properly, there's no going back. Beware!

Thank you for reading! I'll be back with more soon!