### 使用伸缩盒布局创建一个三列布局每一列占用`col-{n}`/12份基于父级容器的宽度

#### Answer

设置`.row`类的父级容器为`display: flex;`样式然后使用`flex`缩写形式属性给每一列子元素设置一个`flex-grow`值使得每一列可以按照设置的比例自动协调宽度

#### html

<div class="row">
  <div class="col-2"></div>
  <div class="col-7"></div>
  <div class="col-3"></div>
</div>

#### css

.row {
  display: flex;
}

.col-2 {
  flex: 2;
}

.col-7 {
  flex: 7;
}

.col-3 {
  flex: 3;
}

##### Additional links

MDN docs for basic concepts of flexbox

A complete guide to Flexbox