欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

移动Web开发必备基础(flex项目属性)

程序员文章站 2022-06-24 15:48:54
前提:父容器设置了display:flex 或 inline-flex order 项目的排列顺序 默认是0,数字越小,排在越前面

前提:父容器设置了display:flex 或 inline-flex

 

order 项目的排列顺序

默认是0,数字越小,排在越前面

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;flex-wrap:wrap;height:300px;border:1px solid;}
        .child:nth-child(4){order:-1;}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

移动Web开发必备基础(flex项目属性)

 

 

flex-grow 容器有多余空间时项目是否扩张

默认是0,都不扩张

如果都是1,则平分剩余空间

如果数字不一致,则按照比例平分剩余空间

没有设置flex-grow属性和已经明确设置过width属性的元素,不参与平分剩余空间

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;flex-wrap:wrap;height:300px;border:1px solid;}
        
        .parent1 .child{flex-grow:1;}

        .parent2 .child{flex-grow:1;}
        .parent2 .child:last-child{flex-grow:3;}

        .parent3 .child:nth-child(1){flex-grow:1;}
        .parent3 .child:nth-child(2){flex-grow:1;}
        .parent3 .child:nth-child(3){flex-grow:1;}
    </style>
</head>
<body>
    <!-- 不平分空间 -->
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <!-- 等分空间 -->
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <!-- 按比例等分空间 -->
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <!-- 没有设置flex-grow则不参与 -->
    <div class="parent parent3">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

移动Web开发必备基础(flex项目属性)

 

 移动Web开发必备基础(flex项目属性)

 

 移动Web开发必备基础(flex项目属性)

 

 移动Web开发必备基础(flex项目属性)

 

 

flex-shrink 空间不足时项目是否缩小

默认是1,将等比缩小

如果设置为0,则不参与缩小

负值无效

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;height:300px;border:1px solid;width:300px;}
        
        .parent1 .child{flex-shrink:0;}

        .parent2 .child{flex-shrink:1;}
        .parent2 .child:last-child{flex-shrink:0;}

    </style>
</head>
<body>
    <!-- 默认等比缩小 -->
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <!-- 全部不缩小 -->
    <div class="parent parent1">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
    <!-- 设置为0的不参与缩小 -->
    <div class="parent parent2">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>

</body>
</html>

移动Web开发必备基础(flex项目属性)

 

 移动Web开发必备基础(flex项目属性)

 

 移动Web开发必备基础(flex项目属性)

 

 

flex-basis 定义项目所占的主轴空间

auto 默认值

瓜分剩余空间时会先去除flex-basis中设置的固定值

当flex-basis和width属性同时存在时,width属性不生效

 

flex

是flex-grow  flex-shrink  flex-basis的简写,默认是 0 1 auto

如果要设置项目平分空间,建议设置 flex:1 这种简写方式

 

align-self 设置项目的交叉轴对齐方式,可覆盖父容器设置的align-items属性

auto 默认值,表示继承自父容器;如果没有父容器,则等同于stretch

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .child{width:100px;height:100px;background:orange;border:1px solid #333;margin:2px;}
        .parent{background:#abcdef;display: flex;height:300px;border:1px solid;align-items:center;}
        .parent .child:first-child{align-self:flex-start;}
        .parent .child:last-child{align-self:flex-end;}

    </style>
</head>
<body>
    <!-- 默认等比缩小 -->
    <div class="parent">
        <div class="child">1</div>
        <div class="child">2</div>
        <div class="child">3</div>
        <div class="child">4</div>
    </div>
</body>
</html>

移动Web开发必备基础(flex项目属性)