dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 761|回复: 0

[Html/Css] 移动Web开发必备基础(flex项目属性)

[复制链接]
  • TA的每日心情

    2024-2-20 11:15
  • 签到天数: 11 天

    [LV.3]偶尔看看II

    878

    主题

    4343

    帖子

    3987

    积分

    终身会员[A]

    Rank: 7Rank: 7Rank: 7

    积分
    3987

    发表于 2020-3-18 16:00:00 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

    order 项目的排列顺序
    默认是0,数字越小,排在越前面

    [HTML] 纯文本查看 复制代码
    <!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>

    1.png

    flex-grow 容器有多余空间时项目是否扩张
    默认是0,都不扩张
    如果都是1,则平分剩余空间
    如果数字不一致,则按照比例平分剩余空间
    没有设置flex-grow属性和已经明确设置过width属性的元素,不参与平分剩余空间

    [HTML] 纯文本查看 复制代码
    <!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>


    2.png
    3.png
    4.png
    5.png

    flex-shrink 空间不足时项目是否缩小
    默认是1,将等比缩小
    如果设置为0,则不参与缩小
    负值无效


    [HTML] 纯文本查看 复制代码
    <!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>

    6.png
    7.png
    8.png

    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

    [HTML] 纯文本查看 复制代码
    <!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>

    9.png








    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-26 11:29 , Processed in 0.093433 second(s), 36 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表