tdarb.org > Width or flex-basis?

// 428 words // 2 minute read

Width or flex-basis?

Creating rows and columns of elements that adapt dynamically can be a little tricky depending on the desired outcome. Let’s breakdown how to solve this issue using both inline-block paired with width and flex-basis.

Width

Setting the width of the inner children to a divisible value and setting their display to inline-block, we are able to create self-wrapping elements:

.width-container {
    display: block;
}
.width-container__item {
    display: inline-block;
    width: calc(33% - 3px); /* Fix for wonky inline-block margins */
}

Pros

Cons

Flex-basis

This is my personal preference for dynamically wrapping inner children elements. Simply set the parent as display: flex, allow flex-wrapping and then set the flex-basis of the children to any percentage value.

.flex-container {
    display: flex;
    flex-wrap: wrap;
}
.flex-container__item {
    flex: 1 1 auto;
    flex-basis: 33%;
}

You will also notice the flex property set to 1 1 auto. This is important if you require your wrapped elements to fill the remaining space of the parent container.

Pros

Cons

CodePen Demo

Feel free to play around with a slightly more stylized version of both options below:

CodePen Demo: Width or flex-basis


Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email