弹性盒模型的小例子

弹性盒模型的小例子

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性盒模型</title>
<style>
     body,ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display:flex;
     }
     ul{
        position: relative;
        margin: 50px auto;
        width: 900px;
        border: 3px solid green;
        align-items:flex-start;
        justify-content:flex-start;
        flex-wrap:wrap;
     }
     li{
        text-align: center;
        width: 160px;
        height: 160px;
        margin: 10px;
        background: pink;
        color: #fff;
        line-height: 160px;
     }
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/stay_hungry_stay/article/details/81164175