CSS 弹性容器和弹性元素的属性学习笔记

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
     
     
        margin:0;
        padding:0;
        list-style: none;
    }
    .clearfix::after,
    .clearfix::before{
     
     
        content:'';
        display: block;
        clear:both;


    }
    ul{
     
     
        width: 200px;
        border:10px solid red;
        /* 设置为弹性容器 */
        display:flex;
        flex-direction: row;
        /* 设置弹性元素是否在弹性容器中是否换行
        flex-wrap:
            可选值：nowrap 默认值，元素不会自动换行；
                    wrap 元素沿着辅轴方向自动换行；
                    wrap-reverse 沿着辅轴反方向换行；
                flex-flow:是flex 和 flex-wrap 的简写属性；
         */
         /* 
         弹性容器的样式：
            justify-content
                -如何分配主轴上的空白空间（主轴上 的元素如何排列）
                可选值：
                    flex-start 元素沿着主轴起边排列；
                    flex-ced 元素沿着主轴终边排列；
                    center 元素居中排列；
                    space-around 空白分布到元素的两侧；
                    space-evenly 空白分不到元素的单侧；
                    space-between 空白均匀分布到元素间；
            align-items:\
                -元素在辅轴上如何对齐
                -元素间的关系
                    可选值：
                        stretch 默认值，将元素的长度设置为相同值；
                        flex-start 元素不会拉伸，沿着辅轴起边对齐；
                        flex-end 元素沿着辅轴的终边对齐；
                        center  元素居中对齐；
                        baseline 基线对齐，用的不是很多；
            align-content
                -辅轴空白空间的分布
                可选值：
                    flex-start 元素沿着辅轴起边排列；
                    flex-ced 元素沿着辅轴终边排列；
                    center 元素居中排列；
                    space-around 空白分布到元素的两侧；
                    space-evenly 空白分不到元素的单侧；
                    space-between 空白均匀分布到元素间；

            align-self: 单独设置元素上的分布；
        弹性元素的样式：
            flex-grow  弹性的增长系数；
            flex-shrink 弹性的缩减系数；
                -计算方式比较复杂，根据缩减系数和元素的大小来计算；
            flex-basis 指定元素在主轴上的基础长度，如果主轴是横向的，该值指定的是元素的宽度，如果主轴是纵向的，该值指定的是元素的高度；
                默认值是auto，如果传递了具体的数据，则以该值为准；

            简写属性：
                flex：增长系数 缩减系数 基础；

            order 决定元素的排列顺序；
                order：1；
                order：2；
                order：3；
                可以通过order设置元素的顺序；
        能用flex就不用浮动。

          */
        flex-wrap:wrap;
    }
    li{
     
     
        width: 100px;
        height: 100px;
        background-color: #bfa;
        float: left;
        font-size: 50px;
        line-height: 100px;
        flex-shrink: 0;
        

    }
    li:nth-child(1){
     
     
        /* flex-grow:1; */
    }
    li:nth-child(2){
     
     
        background-color: orange;
        /* flex-grow:1; */
    }
    li:nth-child(3){
     
     
        background-color: blueviolet;
        /* flex-grow:1; */
    }
    </style>
    
</head>
<body>
    
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>`
CSS 弹性容器和弹性元素的属性学习笔记

猜你喜欢
