网页布局（layout）是CSS的一个重点应用，布局的传统解决方案，基于盒子模型，依赖 display属性   position属性   float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

       2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，Flex布局将成为未来布局的首选方案。

参考文章：《2.布局语法教程》

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

以大国工匠匠心传世部分为例，代码如下。

1.html代码

<div id="origin">

<h3 class="img_bar">匠心传世</h3>

<ul>

<li>

  <img src="img/1.jpg" alt="大勇不惧">

  <p><a href="#">第一集 大勇不惧</a></p>

</li>

<li>

  <img src="img/2.jpg" alt="大工传世">

  <p><a href="#">第二集 大工传世</a></p>

</li>

<li>

<img src="img/3.jpg" alt="大艺法古">

<p><a href="#">第三集 大艺法古</a></p>

</li>

<li>

  <img src="img/4.jpg" alt="大巧破难">

  <p><a href="#">第四集 大巧破难</a></p>

</li>

<li>

   <img src="img/5.jpg" alt="大术无极">

   <p><a href="#">第五集 大术无极</a></p>

</li>

</ul>

</div>

2.CSS代码

#origin{

width:1000px;

margin:30px auto;

overflow: hidden;

}

#origin ul{

margin-top:20px;

display: flex;                    /*父元素用弹性布局*/

justify-content: space-between;   /*space-between*/

}

#origin li{

width:160px;      /*设定宽度*/

text-align:center;

}

#origin li a{

color:#333333;

font-weight:bold;

}

#origin li a:hover{

color:#EC8C25

}