弹性盒子复合写法

最新推荐文章于 2024-07-26 08:00:00 发布

囍之郎H

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量114

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_72496689/article/details/127564814

版权

flex-flow:flex-direction flex-wrap;
例：
flex-flow:cloumn wrap;

项目属性——写在弹性子元素上

align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）

此属性和弹性容器的 align-items 属性作用相同

align-self: stretch; 如果弹性子元素没有高度或高度为auto，将占满整个容器的高度
align-self: flex-start;（侧轴）交叉轴起点对齐
align-self: flex-end; （侧轴）交叉轴终点对齐
align-self: center; （侧轴）交叉轴中点对齐

.warp .box1 {
            height: auto;
            background-color: red;
            align-self: auto;
            align-self: stretch;
        }

        .warp .box2 {
            background-color: pink;
            align-self: flex-start;
            align-self: flex-end;
        }

        .warp .box3 {
            background-color: brown;
            align-self: center;
        }

order属性；子元素的排列次序

属性值为数值，没有单位，默认数值为0，数值越小，排列越靠前
必须为整数，不能为小数，可以为负数

 .warp .box1 {
            background-color: red;
            order: 1;
        }

        .warp .box2 {
            background-color: pink;
            order: 0;
        }

        .warp .box3 {
            background-color: brown;
            order: -1;
        }

flex

作用：用于指定弹性子元素如何分配空间。 flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

flex-grow属性：子元素的放大比例（子项宽度和<父盒子宽度的时候）

属性值为数值，没有单位，默认值为0，表示不放大
负值对该属性无效
可以为小数
注意：当容器有剩余空间时有效

 .warp {
            width: 400px;
            height: 400px;
            display: flex;
        }

        .warp div {
            width: 100px;
            height: 100px;
        }

        /* 剩余空间400-300=100 */
        .box1 {
            background-color: red;
            flex-grow: 2;
            /* 100+100*2/4 = 150 */
        }
        .box2 {
            background-color: pink;
            flex-grow: 1;
            /* 100+100*1/4=125 */
        }

        .box3 {
            background-color: brown;
            /* 100+100*1/4=125 */
            flex-grow: 1;
        }

flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）
- 属性值为数值，没有单位
- 默认值为1，表示当空间不足时，等比例缩小
- 属性值为0，表示当空间不足时，不缩小
- 负值对该属性无效

可以为小数

  .warp {
            width: 500px;
            height: 400px;
            display: flex;
        }
        .warp div {
            width: 200px;
            height: 100px;
        }
        /*不足空间，缺了100 600-500=100*/
        .box1 {
            background-color: red;
            flex-shrink: 2;
          
        }
        .box2 {
            background-color: pink;
            flex-shrink: 1;
            
        }
        .box3 {
            background-color: brown;
            flex-shrink: 1;
           
        }
每个元素的宽
       (当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度

- 水平垂直居中的元素的父元素上设置相关属性
    - display: flex;
    - justify-content: center; 主轴上子元素的对齐方式
    - align-items: center; 交叉轴上子元素的对齐方式

    <style>
        .wrap {
            width: 400px;
            height: 400px;
            background-color: chartreuse;
            display: flex;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;

        }

        .wrap div {
            width: 100px;
            height: 100px;
            background-color: pink;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div>绝对居中</div>
    </div>
</body>
</html>

flex-basis

定义弹性盒项目基准值（即参与计算的最终值————1.基于它计算容器的剩余空间2.基于它计算增长以后的最终值）
取值
- auto 默认值
- 长度值【一个长度单位或者一个百分比】
注意：与项目的宽、高同时存在时，flex-basis的优先级高于宽、高

囍之郎H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹性盒子复合写法

flex是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。(当前元素的宽*shrink值)/(元素1*元素1shrink值+元素2*元素2shrink值...) * 溢出空间宽度。align-self属性：调整自身在侧轴的对齐方式，弹性容器中被选中子项的对齐方式（设置在子元素中）flex-shrink属性：子元素的缩小比例（子项宽度和>父盒子宽度的时候）flex-grow属性：子元素的放大比例（子项宽度和
复制链接

扫一扫