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 inn…


This content originally appeared on Ugly Duck and was authored by Bradley Taunt

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

  • 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

CodePen Demo

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

CodePen Demo: Width or flex-basis


This content originally appeared on Ugly Duck and was authored by Bradley Taunt


Print Share Comment Cite Upload Translate Updates
APA

Bradley Taunt | Sciencx (2018-11-28T00:00:00+00:00) Width or flex-basis?. Retrieved from https://www.scien.cx/2018/11/28/width-or-flex-basis/

MLA
" » Width or flex-basis?." Bradley Taunt | Sciencx - Wednesday November 28, 2018, https://www.scien.cx/2018/11/28/width-or-flex-basis/
HARVARD
Bradley Taunt | Sciencx Wednesday November 28, 2018 » Width or flex-basis?., viewed ,<https://www.scien.cx/2018/11/28/width-or-flex-basis/>
VANCOUVER
Bradley Taunt | Sciencx - » Width or flex-basis?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2018/11/28/width-or-flex-basis/
CHICAGO
" » Width or flex-basis?." Bradley Taunt | Sciencx - Accessed . https://www.scien.cx/2018/11/28/width-or-flex-basis/
IEEE
" » Width or flex-basis?." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2018/11/28/width-or-flex-basis/. [Accessed: ]
rf:citation
» Width or flex-basis? | Bradley Taunt | Sciencx | https://www.scien.cx/2018/11/28/width-or-flex-basis/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts