Let's assume that you have the following structure:
html<div class = 'Parent'> <div class = 'Child'></div> <div class = 'Child'></div> <div class = 'Child'></div> <div class = 'Child'></div> <div class = 'Child'></div> <div class = 'Child'></div> </div>
If you want a flexbox with three columns, instead of assigning a width to the childs of 33.33%
, you can use the calc()
function to calculate it:
CSS.Parent{ display: flex; flex-wrap: wrap; } .Child{ width: calc(100%/3); }
Result:
terminal_______ _______ _______ | | | | | Child | Child | Child | | | | | |_______|_______|_______| | | | | | Child | Child | Child | | | | | |_______|_______|_______|
Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.