Flex 弹性盒 布局（弹性盒布局属于哪项技术）

常用的属性就这些啦，多实战，感受一下呗！

#container {
            display: flex;
            /* 排列方向 */
            flex-direction: row;
            /* flex-direction: column; */
            /* 是否换行 */
            flex-wrap: wrap;
            /* flex-flow 等于flex-direction和flex-wrap 的缩写，但是不常用 */
            /* flex-flow: row nowrap; */
             /* 项目在主轴上的对齐方式 */
             justify-content: space-between;
             height: 600px;
             /* 项目在交叉轴的对齐方式（需要设置高度） */
            align-items: center;
						/* 多根轴线的对齐方式 */
            align-content: stretch;
        }

        .item {
            background: #f4f4f4;
            border: #ccc solid 1px;
            padding: 1rem;
            text-align: center;
            margin: 0.75rem;
            /* 子元素 */
            flex: 1; 
        }

        .item:first-child {
            flex: 1;
             /* 单个项目在交叉轴的对齐方式 */
            align-self: center;
            /* 优先级 num越小，越前 */
            order: 3;
        }
    </style>