如何使用 flexbox 实现 box-sizing 功能？答案

【问题标题】：How to achieve box-sizing functionality with flexbox?如何使用 flexbox 实现 box-sizing 功能？
【发布时间】：2015-10-24 16:18:35
【问题描述】：

所以我发现 flexbox 不尊重 box-sizing: border-box; CSS 声明的艰难方式。美好的。但是有没有办法使用 flexbox 布局来获得该功能？

查看this JS Fiddle。我们有 3 行，每行有 3 个框。我希望所有的盒子都一样大。中间行的中间框有一些边距和边框属性，使其更大。在盒子模型中，我们将使用box-sizing: border-box 来解决这个问题。 flexbox 模型中是否有一些等价物？

现场演示：

$(function() {    
  for(var i = 1; i <= 3; i++) {
    $('<div class="row" id="row' + i + '">').appendTo($('#grid'));
    
    for(var j = 0; j < 3; j++) {
      if(i === 2 && j === 1) {
        $('<div class="box2">').appendTo($('#row' + i));
      } else {
        $('<div class="box">').appendTo($('#row' + i));
      }
    }
  }
});

html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 300px;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 25px solid cornflowerblue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.row {
  width: 100%;
  height: auto;
  margin: 10px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
}

.box {
  flex-grow: 1;
  margin: 10px;
  background: pink;
}

.box2 {
  flex-grow: 1;
  margin: 10px;
  box-sizing: border-box;
  border: 25px solid purple;
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="grid"></div>
</body>

【问题讨论】：

@Max - 你是如何编辑帖子以在页面上包含这样的代码的？
很高兴你问到！ Here's a blog post explaining.
我也刚刚注意到，如果您在没有全屏的情况下单击“运行演示”，该演示实际上并不能正常工作。我将您的代码编辑为html {height: 300px;}，以便更好地说明您要显示的内容。希望你不要介意。
注意 box-sizing 确实适用于 flex-box。但是，flex-grow 通过增加弹性项目的宽度来分配可用空间，而忽略它们是否有边框。
@max，我认为您链接到的博客文章与关于 flexbox+box-sizing 的实际 OP 问题有关，而不是关于在帖子中获取 sn-ps 的问题。并不是说您现在可以真正编辑它，但请记住您将来要回答的问题，对于其他人来说，该博客不是关于 flexbox+box-sizing...继续查找。

标签： css flexbox border-box

【解决方案1】：

我认为您需要定义 height 才能使 box-sizing 工作。

我在下面的代码中添加了height: 25.3%;，意思是(300px-25px*2-10px*6)/((300px-25px*2)*3)，代码有效。

http://jiayuanpulto.github.io/test/test_box-sizing.html

【讨论】：