网页布局（layout）是 CSS 的一个重点功能。传统的布局方案基于盒状模型，依赖 display 、position、float属性。在一些特殊的布局过程中非常不便。2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div
style="display:flex;">
flex box
</div>
</body>
</html>行内元素 Flex 布局 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div
style="display:flex;">
<div style="display:inline-flex;">
hi...
</div>
</div>
</body>
</html>如果要使用 Flex 布局可以在布局最外层元素使用 display:flex; 声明，然后其内部的元素即可使用 flex 布局，请继续阅读后面的章节进一步学习 flex 布局技能。