Is it good to use flex-box and box sizing at the same time? sometimes I am confuse by this two
1 Like
Hi, there!
It is perfectly acceptable to use both flexbox and box-sizing at the same time, as they are not inherently related. Flexbox is a layout model, while box-sizing concerns the width and height of an element.
Correct me If I am wrong. box-sizing is concern with the boundaries between element. while flexbox is the arrangement of elements inside a box-sizing.
As mentioned, box-sizing sets how the height and width are calculated for an element. There are two values for box-sizing, content-box and border-box. content-box is the default value of box-sizing. When you set an element’s height and width, any padding or borders applied will increase the height and width of the element. For example:
For this div, we can see that it has been given a width of 200px, but because of its padding and border, its calculated width and height are 242. 16 + 5 + 200 + 5 + 16 = 242
Now if border-box is applied:
The padding and border respect the given height and width, and the content box shrinks to include these values in the calculated H/W.
flex-box positions flex-items on an entire page or within its container.
Neither box-sizing or flex-box depends on the other and can be used simultaneously.
This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.