Width or Flex-Basis?
2018-11-28
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