flex-grow & align & :root 封装

最新推荐文章于 2024-05-31 14:44:29 发布

沐沐185

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量68

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_67642008/article/details/125267413

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

order 定义项目的排列顺序。数值越小，排列越靠前。默认值时0.

设置了项目的order 属性，会按照项目的order 值大小进行排序。

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。主要作用是：分配剩余空间的

flex-shrink : <number>(number不为负值)

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。主要作用是做缩小空间用的

flex-basis

在flex-grow 和flex-shinrk属性起作用以前，定义每一个flex项目的默认大小，它的默认值为auto，即项目的本来大小

flex-basis: auto || <length>;

Flex-basis 设置具体宽度之后，值是包括 border 和 padding 的值的。

length: 我们平常用的一些属性值，如 px、%、 rem等

Flex-basis 优先级比 width 要大

align-self (可以给单个项目单独设置该属性，使得该项目单独排序)

交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

calc 关键字来控制自适应宽度的固定差值

tips : IE8以下不支持；

width : calc (100vw - 100px),宽度自适应屏幕的宽度，但是始终比屏幕尺寸小 100px

width : calc (100vw + 100px) 宽度自适应屏幕的宽度，但是始终比屏幕尺寸大 100px，即多出100px的滚动条。

<style>
        :root {
            --blue: #6470e0;
            --red: rgb(141, 8, 8);
        }
        div {
            height: 100px;
            background: var(--blue);
            width: calc(100vw - 4.1667rem);
            color: var(--red);
        }
    </style>
</head>
<body>
    <div>
        12345
    </div>
</body>

css定义变量

：root {
            --blue : #ffffff;
            --gray : #f8f8f8;
            }
div {
        background : var (--blue);
        color: var (--blue);
        }
p {
        color :var (--blue);
    }