zoukankan      html  css  js  c++  java
  • 伸缩属性的 grow与 shrink

    <style>
    *{
    padding: 0;
    margin: 0;
    }
    .box{
    900px;
    height: 600px;
    border: 1px solid red;
    margin:0 auto;
    /*设置父容器为盒子:会使每一个子元素自动变成伸缩项
    当子元素的宽度和大于父容器宽度的时候,子元素会自动平均收缩*/
    display: flex;
    /*设置子元素的主轴方向上的排列方式*/
    justify-content: space-around;

    }
    .first{
    200px;
    height: 200px;
    background-color: red;
    /*flow-grow:可以来扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值
    比例值计算 :当前空间的flex-grow/所有兄弟元素的flex-grow的和
    flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
    flex-grow: 1;

    /*flex-shrink:定义收缩比例,通过设置的值来计算收缩空间
    比例值计算 :当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
    默认值为1*/
    /*flex-shrink: 2;*/

    }
    .second{
    200px;
    height: 200px;
    background-color: green;
    flex-grow: 1;
    }
    .third{
    200px;
    height: 200px;
    background-color: blue;
    flex-grow: 2;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
    </div>
  • 相关阅读:
    Android Studio 插件
    天气预报接口api(中国天气网)
    使用easyui的Tree 实现无限子节点绑定
    js调用后台方法
    div窗口效果来自标准之路
    C#生成dll程序集文件
    一个技术人的博客
    HTML-embed标签详解
    网站生成桌面快捷图标
    文本框宽度自动适应文本宽度
  • 原文地址:https://www.cnblogs.com/lujieting/p/10230734.html
Copyright © 2011-2022 走看看