Css lessons on box-sizing and flex-box

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.