弹性盒模型

弹性盒模型可以解决横向排列的问题还有盒子之间的间距

display:Flex;

dom结构

<div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>

css样式

       /* 初始化 */
 *{
            margin: 0px;
            padding: 0px;
        }
        ul{
            width: 250px;
            height: 280px;
            border: 1px solid #000;
            /* li标签将会横向排列，相当于float:left; */
            display: flex;
        }
        li{
            list-style: none;
            width: 50px;
            height: 70px;
            border: 1px solid #ddd;
        }