使用伸缩盒布局创建一个三列布局每一列占用`col

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

#### Answer

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

#### html

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

#### css

1.row {
2  display: flex;
3}
4
5.col-2 {
6  flex: 2;
7}
8
9.col-7 {
10  flex: 7;
11}
12
13.col-3 {
14  flex: 3;
15}

##### Additional links

MDN docs for basic concepts of flexbox

A complete guide to Flexbox