日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS樣式：彈性容器上的樣式

作者：那人獨釣寒江雪. 更新時間： 2022-07-12 編程語言 
<!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: 500px;
            border: 10px red solid;
            /* 設置ul為彈性容器 */
            display: flex ;
            /* flex-direction: column; 
            flex-wrap:
                設置彈性元素是否在彈性容器中自動換行
                可選值：
                    nowrap 默認值,元素不會自動換行
                    wrap 元素沿著輔軸方向自動換行
                    wrap-reverse 元素沿著輔軸反方向換行
            */
            flex-wrap: wrap-reverse;

            /* 彈性的增長系數

            */
            flex-grow:1;

            /* 彈性元素的縮減系數 */
            flex-shrink: 1;

            /* 元素基礎長度 

            flex-basis:100px; 指定的是元素在主軸上的基礎長度
                如果主軸是橫向的 則該值指定的就是元素的寬度
                如果主軸是縱向的 則該值指定的就是元素的高度
                - 默認值是auto, 表示參考元素自身的高度或寬度
                - 如果傳遞了一個具體的數值,則以該值為準

               

            */
            flex-basis: 100px;
            /* oreder決定彈性元素的排列順序 */
            order: 1;
            order: 2;
        }
        
    </style>
</head>
<body>
    
</body>
</html>

原文鏈接：https://blog.csdn.net/m0_62491934/article/details/125710876

欄目分類
最近更新