基本概念

1、父盒子设置了伸缩属性，子盒子设置伸缩比例

2、以上设置完之后子盒子会按照比例分布在父盒子中

3、当设置伸缩比例时默认会按照x轴方向分配，因为默认情况下伸缩布局主轴方向是x轴方向

4、设置伸缩属性，没有设置具体宽度，默认是100%

5、父盒子设置了伸缩属性，子盒子设置伸缩比例，子盒子不会超出父盒子，如若添加边框也是盒子模式中的border-box模式

案例描述

1、父盒子设置了伸缩布局，子盒子设置了比例

2、上述设置完之后，子盒子无需设置宽高，会自动填满

3、注意调换主轴方向

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            list-style: none;

        }

        ul {

            width: 400px;

            height: 30px;

            display: flex;

            margin: 70px auto;

            border: 1px solid #000;

        }

        li {

            background-color: pink;

            margin: 0 5px;

        }

        li {

            flex: 1;

        }

        .layout {

            width: 300px;

            margin: 20px auto;

            height: 500px;

            display: flex;

            flex-direction: column;

        }

        .nav {

            background-color: pink;

            flex: 1;

        }

        .section {

            flex: 5;

            display: flex;

        }

        .section .left {

            flex: 1;

            background-color: #ccc;

        }

        .section .right {

            flex: 4;

            background-color: blue;

        }

        .footer {

            flex: 1;

            background-color: yellow;

        }

    </style>

</head>

<body>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

<div class="layout">

    <div class="nav"></div>

    <div class="section">

        <div class="left"></div>

        <div class="right"></div>

    </div>

    <div class="footer"></div>

</div>

</body>

</html>

html5——伸缩比例的更多相关文章

  1. html5——伸缩比例案例（携程）

    1.有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2.不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例 ...

  2. HTML5按比例缩略图片并上传的实例

    <!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <sc ...

  3. CSS3 04. 伸缩布局、设置主轴，侧轴方向、主／侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items；控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  4. html5——伸缩布局

    基本概念 1.主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 2.侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 3.方向:默认主轴从左向右,侧轴默认从上到下 4.主轴和侧轴并不是固 ...

  5. 关于Cocos2d-x中实例伸缩后的位置设置

    在有的时候觉得图片太大,会进行缩放,但是在设置位置的时候,用fire->getContentSize(),用的是它原来的大小,就会产生不能准确设置节点的现象 1.在设置伸缩比例的时候,记住比例值 ...

  6. CSS 伸缩布局

    转载于:https://blog.csdn.net/weixin_41342585/article/details/80140513 1. flex-direction:设置伸缩容器中成员的排列方式 ...

  7. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  8. web前端知识大纲：系列二 css篇

    web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...

  9. （转）web前端知识精简

    Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...

随机推荐

  1. hdu 1533KM算法

    #include<stdio.h> #include<string.h> #include<math.h> #define inf 0x3fffffff #defi ...

  2. 转载 - Python里面关于 模块 和 包 和 __init__.py 的一些事

    出处:http://www.cnblogs.com/tqsummer/archive/2011/01/24/1943273.html python中的Module是比较重要的概念.常见的情况是,事先写 ...

  3. Switch Game

    Problem Description There are many lamps in a line. All of them are off at first. A series of operat ...

  4. MySQL: 改变Homebrew安装MySQL/MariaDB的数据库文件目录

    1. brew install mariadb 2. mysql_install_db --verbose --user=$USER --basedir=/usr/local/Cellar/maria ...

  5. uva 10716 Evil Straw Warts Live(贪心回文串)

    这道题目我用了一上午才做出来,还是看的别人的思路,尽管没有看代码做的有点慢.代码能力还是得加强啊.思维 得缜密.不能想当然,要有根据,写上的代码要有精确度.省的以后还得慢慢调试 思路:贪心.每次都查看 ...

  6. Android利用Volley异步载入数据完整具体演示样例(二)

    MainActivity例如以下: package cc.y; import android.app.Activity; import android.content.Context; import ...

  7. starUML 2.5.1 for mac

    http://www.macupdate.com/app/mac/55571/staruml/download 一直在windows下使用 star UML,占用资源少,简洁易用. Mac下也能够用了 ...

  8. The Pragmatic Programmer 读书笔记之中的一个 DRY-Don’t Repeat Youself

     The Pragmatic Programmer读书笔记之中的一个 DRY-Don't Repeat Youself 尽管自己买了非常多软件project方面的书,可是由于时间的问题.一直没有静 ...

  9. C#中的文件导出大全

    s 得到 radiobuttonlist和CheckBoxList 选中值 得到radiobuttonlist 选中值:var CheckBoxList=document.all.optButtonL ...

  10. luogu 1045 麦森数

    题目大意: 从文件中输入P(1000<P<3100000),计算2^P−1的位数和最后500位数字(用十进制高精度数表示) 思路: 一道高精度练习题 其中位数是一个结论 位数=[P*log ...