Box-sizing:border-box; virker på en flex container..
..men kun på flex items som har mål i % eller px. Med fx flex:1; har border-box ingen effekt.
Test med DevTools.
section{max-width:1000px;}
section>div{padding:3%; margin:1%; border:1px...}
<section style='box-sizing:content-box'> <div style='box-sizing:content-box'>
flex:1;
Should I Use Grid Or Flexbox? This is still the top question that I’m asked when teaching layout, and in general, I find that as people become more used to working with newer layout methods, it becomes a question you need to ask yourself less.
As you build more components you will get a feel for which layout method to use.
If you are just getting to grips with the idea, however, the thing to remember is that both CSS Grid Layout and Flexbox are both CSS.
width:25%;
Whether you have specified display: grid or display: flex, you often use more that is common than is different.
Both Grid and Flexbox use the properties which are part of the Box Alignment specification; they both draw on concepts detailed in CSS Intrinsic and Extrinsic Sizing.
Asking whether your design should use Grid or Flexbox is a bit like asking if your design should use font-size or color. You should probably use both, as required.
max-width:250px;
Whether you have specified display: grid or display: flex, you often use more that is common than is different.
Both Grid and Flexbox use the properties which are part of the Box Alignment specification; they both draw on concepts detailed in CSS Intrinsic and Extrinsic Sizing.
Asking whether your design should use Grid or Flexbox is a bit like asking if your design should use font-size or color. You should probably use both, as required.