弹性盒模型计算

DIV1

DIV2

DIV3

DIV4

弹性盒模型宽度为0的前提下，如果弹性盒模型内设置了具体宽度，计算盒模型的宽度时，应该用父级的宽度减去具体设置的值，然后剩下的宽度按照flex等分计算。
也可理解为：父级减去内部所有固定宽度后，按照flex总份数等分，每个盒子再乘以所占份数最后加上自己的固定宽度（margin、padding、border）。

示例：

此例设置DIV1、DIV2、DIV3为弹性盒模型，DIV1占2份，DIV2、DIV3各占1份。DIV4为固定宽度200px，左边距60px。所有DIV设置内边距50px，边框20px。父级总宽1000px。

第一步：用父级总宽减去所有固定宽度，4个div共有8个50px的横向padding、8个20px的横向border，1个200px的固定div，以及一个横向60px的margin
1000 - 50 * 8 - 20 * 8 - 200 - 60 = 180

第二步：将剩下的宽度按照flex的份数等分，div1为2、div2为1、div3为1，一共为4份
180 / 4 = 45

结果：
DIV1的宽度为 45 * 2 + 50 * 2 = 190
DIV2的宽度为 45 * 1 + 50 * 2 = 145
DIV3的宽度为 45 * 1 + 50 * 2 = 145
DIV4的宽度为 200 + 50 * 2 = 300

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹性盒子模型计算</title>
<style>
body { font-size:1em; line-height:1.5em; padding:50px; color:#333; font-family:"微软雅黑"; }

.box { width:1000px; background:#EBEBEB; border:10px solid #CCC; display:-webkit-box; -webkit-box-orient:horizontal; }
.box div { padding:50px; border:20px solid #00e5ed; color:#FFF; text-shadow:2px 2px 2px rgba(0, 0, 0, .5); width:0; }
.box .div1 { -webkit-box-flex:2; background:#12d698; }
.box .div2 { -webkit-box-flex:1; background:#128ed6; }
.box .div3 { -webkit-box-flex:1; background:#efb017; }
.box .div4 { width:200px; background:gray; margin-left:60px; }
</style>
</head>

<body>
<h1>弹性和模型计算</h1>
<div class="box">
  <div class="div1">DIV1</div>
  <div class="div2">DIV2</div>
  <div class="div3">DIV3</div>
  <div class="div4">DIV4</div>
</div>

<p>弹性盒模型宽度为0的前提下，如果弹性盒模型内设置了具体宽度，计算盒模型的宽度时，应该用父级的宽度减去具体设置的值，然后剩下的宽度按照flex等分计算。<br />
也可理解为：父级减去内部所有固定宽度后，按照flex总份数等分，每个盒子再乘以所占份数最后加上自己的固定宽度（margin、padding、border）。
</p>
<h2>示例：</h2>
<p>
此例设置DIV1、DIV2、DIV3为弹性盒模型，DIV1占2份，DIV2、DIV3各占1份。DIV4为固定宽度200px，左边距60px。所有DIV设置内边距50px，边框20px。父级总宽1000px。<br /><br />
第一步：用父级总宽减去所有固定宽度，4个div共有8个50px的横向padding、8个20px的横向border，1个200px的固定div，以及一个横向60px的margin<br />
1000 - 50 * 8 - 20 * 8 - 200 - 60 = 180<br /><br />
第二步：将剩下的宽度按照flex的份数等分，div1为2、div2为1、div3为1，一共为4份<br />
180 / 4 = 45<br /><br />
结果：<br />
DIV1的宽度为 45 * 2 + 50 * 2 = 190<br />
DIV2的宽度为 45 * 1 + 50 * 2 = 145<br />
DIV3的宽度为 45 * 1 + 50 * 2 = 145<br />
DIV4的宽度为 200 + 50 * 2 = 300
</p>
</body>
</html>