基本概念

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. [bzoj1176]Mokia[CDQ分治]

    啃了一天论文,发现CDQ分治的原理其实很简单,大概就是这样的一类分治:将左右区间按一定规律排序后分开处理,递归到底时直接计算答案,对于一个区间,按照第二关键字split成两个区间,先处理左区间,之后因 ...

  2. Java面试常被问到的题目+解答

    第一,anonymousinnerclass(匿名内部类)是否可以extends(继承)其它类,是否可以implements(实现)interface(接口)? 不行,对于匿名内部类,看到的一句话说的 ...

  3. php处理管道文件流

    <?php #!/usr/local/bin/php -q function read(){ $fp = fopen("php://stdin", "r" ...

  4. 玩一玩MEAN

    参考的书如下: Manning.Getting.MEAN.with.Mongo.Express.Angular.and.Node. 开始再次了解.

  5. codevs——1462 素数和

    1462 素数和  时间限制: 1 s  空间限制: 64000 KB  题目等级 : 青铜 Bronze 题解       题目描述 Description 给定2个整数a,b 求出它们之间(不含a ...

  6. Ext.data.JsonStore的使用

    最近在维护一个Ext.js写的贷前服务系统,Ext.data.JsonStore相当于前台页面的一个数据仓库,负责保存后台传过来的Json数据,具体用法如下: var store12=new Ext. ...

  7. -- > define的用法与学习（1）

    在不久之前,我一直不理解为神马大家在做题时经常用define来代替某些函数,或者用来直接定义某些极大的变量.It is not until today that I understand why it ...

  8. Java并发：线程安全的单例模式

    转载请注明出处:jiq•钦'stechnical Blog 1.饿汉式 public class Singleton { private final static Singleton INSTANCE ...

  9. KonBoot – 只要5K映象文件轻易绕过您的WindowsXP/VISTA/7系统的密码

    http://pannisec.diandian.com/?tag=konBoot 这个东西是我昨晚点击了QQ弹窗的那个SOSO问题后,有人问我如何破解Windows登陆密码,且不可以用net命令创建 ...

  10. Android-spinner

    Android-spinner 一 Adapter概念 spinner:下拉栏里面的TextView 指定系统spinner:在xml文件中面的spinner中的属性android:entries=& ...