machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border: 10px red solid;
            /* 设置ul为弹性容器 */
            display: flex;

            /* 
                flex-wrap：
                    设置弹性元素是否在弹性容器中自动换行
                    可选值：
                        nowrap  默认值，元素不会自动换行
                        wrap    元素沿着辅轴方向自动换行
                        wrap-reverse    元素沿着辅轴反方向换行
            */

            /* flex-wrap: wrap; */
            /* flex-wrap: wrap-reverse; */

            /* flex-flow    wrap 和 direction的简写属性，并且两个值没有顺序要求 */

            /* flex-flow: row wrap; */

            /* 
                justify-content
                    -如何分配主轴上的空白空间（即主轴上的元素如何排列）
                    -可选值：
                        flex-start  表示元素沿着主轴的起边排列
                        flex-end    表示元素沿着主轴的终边排列
                        center      表示元素居中排列
                        space-around    空白分布到元素两侧
                        space-between   空白均匀分布到元素间
                        space-evenly    空白分布到元素的单侧
            */

            justify-content: flex-start;
            /* justify-content: flex-end; */
            /* justify-content: center; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
            /* justify-content: space-between; */
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
        }

        
        li:nth-child(2){
            background-color: pink;
        }

        li:nth-child(3){
            background-color: orange;
        }

    </style>
</head>
<body>

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>