machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!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: 600px;
            height: 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; */

            /* 
                align-items
                    -元素在辅轴上如何对齐
                    -元素间的关系
                    -可选值
                        stretch 默认值，将元素的长度设置为相同的值
                        flex-start    元素不会拉伸，沿着辅轴起边对齐
                        flex-end        沿着辅轴的终边对齐
                        center          居中对齐
                        baseline        基线对齐

                要想设置元素居中，可以使用：
                justify-content: center;
                align-items: center;
                来实现

            */

            /* align-items: stretch; */
            align-items: flex-start;
            /* align-items: flex-end; */
            /* align-items: center; */
            /* align-items: baseline; */

            /* align-content：辅轴空白空间的分布 */
            /* align-content: center; */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: space-around; */
            /* align-content: space-between; */
            align-content: space-evenly;
        }

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

        li:nth-child(1){
            /* align-self：用来覆盖当前弹性元素上的align-items */
            /* align-self: center; */
            /* align-self: flex-start; */
            /* align-self: flex-end; */
            align-self: stretch;
        }

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

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

        li:nth-child(4){
            background-color: yellow;
        }

        li:nth-child(5){
            background-color: chocolate;
        }
    </style>
</head>

<body>

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

        <li>1</li>
        <li>
            2
            <div>2</div>
        </li>
    </ul>

</body>

</html>