下面介绍一种比用浮动定位更灵活的布局方式，是的，就是flex伸缩布局，flex伸缩布局也常用于移动端的布局，因为相对于possion,float，采用flex伸缩布局更灵活，也相对的对手机的资源消耗较少！

伸缩布局会用到的属性

  1. display: flex;让元素编程伸缩容器
  2. flex-direction：row|row-reverse|column|column-reverse主轴方向，加reverse就是表示相反的方向
  3. justify-content:flex-start|flex-end|center|space-around|space-between设置伸缩项目在主轴方向上的对其方式
  4. flex-wrap: wrap(换行)|nowrap(不换行)控制伸缩项目是否换行
  5. align-content：flex-start|flex-end|center|space-around|space-between处理换行后的结果
  6. align-items：stretch|flex-start|flex-end|center处理不换行的结果(侧轴对齐)
  7. flex: 1;控制伸缩项目在伸缩容器中所占的剩余空间
  8. align-self：flex-start|flex-end|center|space-around|space-between个别调整元素位置
  9. order: 10;是用来调整顺序的 规则: 数字越小 元素越靠前

下面给出排列顺序的代码，其他属性请大家自行测试

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>排列顺序</title>
<style>
    ul {
        width: 500px;
        height: 500px;
        list-style: none;
        border: 1px solid #000;
        margin: 0 auto;
        padding: 0;
    }
    li {
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid #ccc;
        background-color: hotpink;
        float: left;
    }
    ul {
        display: flex;
    }
    li:nth-child(1) {
        order: 5;
    }

    li:nth-child(2) {
        order: 2;
    }
</style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>