ムークラスのネットワークプログラミングは3-10を行使する：フレックスのシンプルなレイアウトを

小さなパートナーは、我々は、以下のレンダリングを完了することを学んだ伸縮コンテナのプロパティを使用することにより、その後のプロパティ伸縮コンテナのいくつかを学びます。

完全な結果：

タスク

図1に示すように、容器は、伸縮容器に設定しました

垂直方向に並ぶ2、空白と行と列間の距離

図3に示すように、水平方向、コンテナの左端と右端の最初と最後の項目に配列されています

<！DOCTYPE HTML > 
< HTML > 

< ヘッドLANG = "ZH-CN" > 
    < メタ文字コード= "UTF-8" > 

    < タイトル> </ タイトル> 
    < スタイル> 
        * { 
            マージン：0 ; 
            パディング：0 ; 
        } 
        
        UL { 
            リストスタイル：なし。
            背景色：オレンジ; 
            高さ：150ピクセルによって; 
            幅：390px ; 
            マージン：20ピクセルオート; 
            / * 補足コード* / 

        } 
        

    </ スタイル> 
</ ヘッド> 

< ボディ> 
    < UL > 
        < 李>最初のLi </ 李> 
        < 李>第二リチウム</ 李> 
        < 李>第三のLi </ 李> 
        < 李>第四のLi </ 李>
        < リチウム>第五のLi </ 李> 
        < リチウム>第六のLi </ 李> 
    </ UL > 
</ ボディ> 

</ HTML >

参照コード：

<!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>

ムークラスのネットワークプログラミングは3-10を行使する：フレックスのシンプルなレイアウトを

おすすめ