Mu class network programming exercises 3-10: simple layout of flex

Small partners, we learn some of the properties telescopic container, followed by the use of telescopic container properties we have learned to complete the following renderings.

Complete results:

task

1, the container was set to the telescopic container

2, aligned in the vertical direction, the distance between the blank and the rows as the row

3, are aligned in the horizontal direction, the leftmost and rightmost first and last items of the container

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">

    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            background-color: orange;
            height:By 150px ; 
            width : 390px ; 
            margin : 20px Auto ; 
            / * where supplemental code * / 

        } 
        

    </ style > 
</ head > 

< body > 
    < UL > 
        < Li > first Li </ Li > 
        < Li > second a Li </ Li > 
        < Li > third Li </ Li > 
        < Li > fourth Li </ Li >
        < Li > The fifth li </ li > 
        < li > The sixth li </ li > 
    </ ul > 
</ body > 

</ HTML >

Reference Code:

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">

    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            background-color: orange;
            height: 150px;
            width: 390px;
            margin: 20px auto;
            /* 此处补充代码 */
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-around;
        }
        
        li {
            font-size: 24px;
            width: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
        <li>第四个li</li>
        <li>第五个li</li>
        <li>第六个li</li>
    </ul>
</body>

</html>

Mu class network programming exercises 3-10: simple layout of flex

Guess you like