HTML 弹性布局

一.

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。

二.

space-around 和 space-between 这两个值的区别不能很直观的理解。
space-between 是两端对齐，使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。

space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔，也就是说两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半。

space-evenly：每个项目两侧的间隔相等。所以，项目之间的间隔和项目与边框的间隔相同。

三.例子展示

#nav>ul{
    width: 900px;
    height: 50px;
    margin-right: 80px;
    margin-top: -10px;
    list-style: none;/*去黑点*/
    display: flex;
    justify-content: space-around;/*这两句 弹性布局，平均分部*/
}