前端的学习之路:初级CSS---弹性容器上的样式02

弹性容器上的样式02

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器上的样式02</title>
    <!-- <link rel="stylesheet" href="../chujicss/css/12.01.07.02.css"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            width: 600px;
            height: 800px;
            border: 10px red solid;
            /* 设置ul为弹性容器 */
            display: flex;
            /* flex-direction: row;默认值时自左向右排列 */

            /* flex-wrap: 
                设置元素是否在弹性容器中自动换行
                可选值:
                    nowrap 默认值,元素不会自动换行
                    wrap:元素沿着辅轴方向自动换行
                    wrap-reverse:元素沿着辅轴反方向自动换行 
            */
            flex-wrap: wrap;
            /* flex-wrap: wrap; */
            /* flex-flow: wrap 和 direction 的简写属性; */
            /* flex-flow: wrap row; */

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

            /* 
            align-items:
                -元素在辅轴上如何对齐
                -元素间的关系
                -可选值:
                    stretch 默认值 将元素的长度设置为相同的值(行与行之间的高度)
                    例:第一行中 1 2 3 的高度是一样的
                        第二行中 4 5 的高度是一样的

                    flex-start 元素不会拉伸,沿着 辅轴起边对齐
                    flex-end 沿着辅轴终边对齐
                    center 居中对齐 
                    baseline 基线对齐   
                        */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* align-items: center ; */
            /* align-items: baseline; */

            /* 要想设置一个元素水平居中对齐,就这样设置
            justify-content:center;
            align-items:center;
            */
            /* align-content :辅轴空白空间的分布*/
            /* align-content: center; */

        }

        li {
            width: 200px;

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

        li:nth-child(1) {
            /* align-self :用来覆盖当前弹性元素的align-items*/
            align-self: center;

        }

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

        }

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

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

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

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

        <li>4</li>
        <li>
            5
            <div>5</div>
        </li>
    </ul>
</body>

</html>

运行结果为:
前端的学习之路:初级CSS---弹性容器上的样式02

上一篇:flex布局第二行数据两侧对齐问题


下一篇:今日总结