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: 800px;
        border:10px solid red;
        /* 设置为弹性容器 */
        display:flex;
        /* 设置子元素的样式 */
        /* flex-direction用来指定弹性元素的排列方式：
            可选值：
                row 默认值，水平排列，从左向右；
                    主轴从左向右；
                row-reverse 水平排列，但是反向水平排列，从右向左；
                column  纵向排列，从上向下；
                column-revese  纵向排列，从下向上；
            主轴：弹性元素的排列方向成为主轴；
            侧轴：与主轴垂直方向的称为侧轴；
         */
         flex-direction: row;
        
    }
    li{
     
     
        width: 200px;
        height: 100px;
        background-color: #bfa;
        float: left;
        font-size: 50px;
        line-height: 100px;
        /* 弹性元素的属性：
            flex-grow 用来指定弹性元素的伸展系数：
            -当父元素有多余的空间，子元素如何伸展，默认值是0，不伸展；
            父元素的剩余空间，会按照比列进行分配；

            flex-shrink 指定弹性元素的收缩系数
                当父元素中的空间不足时，如何对子元素如何收缩；
                默认值是1，指定为0就是不收缩；
        */

    }
    li:nth-child(1){
     
     
        flex-grow:1;
    }
    li:nth-child(2){
     
     
        background-color: orange;
        flex-grow:2;
    }
    li:nth-child(3){
     
     
        background-color: blueviolet;
        flex-grow:3;
    }
    </style>
    
</head>
<body>
    <!-- 
        flex(弹性盒 伸缩盒)
            -是css中的有一种布局手段，他主要是用来代替浮动来完成页面布局；
            -flex可以使得元素具有弹性，让元素根素页面的大小改变而改变。
        --弹性容器：
            --要想使用弹性盒，必须先将一个元素设置为弹性容器；
            --通过display来设置弹性容器：
              display：flex;设置为块级弹性容器；
              display:inline-flex;设置为行内的弹性容器；
        --弹性元素：
            弹性容器的子（直接）元素是弹性元素（弹性项）；
            flex可以嵌套，可以是弹性容器和弹性元素；
     -->
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>
CSS 弹性盒学习笔记

猜你喜欢
