网站首页编程语言正文

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

网站首页 编程语言 正文

CSS样式：弹性容器上的样式

相关推荐

网站首页编程语言正文