这个CSS的两行非常有趣：

• display: flex; 告诉<section>元素的子元素作为flexible boxes——默认情况下，它们都将展开以填充父类的可用高度，不管它是什么，并将其列出来——有足够的宽度来包装他们的内容。
• flex: 1; 告诉每个<div>元素，在行中获得相同数量的空间，不管有多少。

为了进一步说明这是多么的神奇，我们还将添加一些java script，以便您可以通过按下_Create box_按钮来添加进一步的子 <div>。

var section = document.querySelector('section');
var createBtn = document.querySelector('.create');
var resetBtn = document.querySelector('.reset');

function createBox() {
  var box = document.createElement('div');
  box.textContent = 'This is a box';
  section.appendChild(box);
}

createBtn.onclick = createBox;

resetBtn.onclick = function() {
  while (section.firstChild) {
      section.removeChild(section.firstChild);
  }
  createBox();
  createBox();
  createBox();
}

这是一个例子——多试试见证Flexbox作为一个布局工具的强大。

网格布局

这里提到的最具实验性的特性是CSS网格，它在浏览器中还没有得到广泛的支持。Web页面通常使用网格系统布局，与打印媒体相同，这里的想法是通过定义一个网格来简化这个过程，然后定义内容的哪些部分位于网格的每个区域。

目前的CSS网格在任何地方都还没有得到真正的支持(除了Firefox和Chrome的实验性版本)。
IE和Edge支持一种更旧的、过时的技术。这是我们将来可以期待的！

注意：为了更好地了解当前的网格框架和其他正在使用的技术，以及即将到来的原生CSS网格规范，请参阅我们的 Grids 文章。

【end】