#title: Width or flex-basis? date: 2018-11-28 00:00:00 Z permalink: "/width-vs-flex-basis/" layout: post description: Comparing width and flex-basis for CSS layouts summary: Is it better to use width or flex-basis for layouts in CSS? Let's breakdown the most common use cases for each and how to implement them. redirect_from: "/2018/11/28/width-vs-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

• Full browser support (as far back as IE6)
• No floats needed

#Cons

• Buggy margin workaround needed
• Wrapped elements cannot dynamically fill remaining empty parent space

#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

• No buggy margins to play with
• Dynamically renders children to fill parent container if flex is set
• Scales well across screen / device sizes

#Cons

• Some versions of IE struggle with browser support

#CodePen Demo

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

CodePen Demo: Width or flex-basis