基本概念

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. [K/3Cloud]ksql翻译札记

    2011-11-16 又学一招,集合转化临时表的方法: var sql = string.Format(@"select b.FENTRYID,a.{2} from {0} a inner ...

  2. poj 3074

    题意:解数独 分析: 完整的数独有四个充要条件: 1.每个格子都有填数字 2.每列都有1~9中的每个数字 3.每行都有1~9中的每个数字 4.每个9宫格都有1~9中的每个数字 可以转化成精确覆盖问题. ...

  3. [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  4. C++学习之可变参数的函数与模板

    所谓可变参数指的是函数的参数个数可变,参数类型不定的函数.为了编写能处理不同数量实参的函数,C++11提供了两种主要的方法:如果所有的实参类型相同,可以传递一个名为initializer_list的标 ...

  5. 【Codeforces】 Round #374 (Div. 2)

    Position:http://codeforces.com/contest/721 我的情况 开始还是rank1,秒出C.(11:00机房都走光了,我ma到11:05才走,只打了一个小时) 结果.. ...

  6. GoLang笔记-数组和切片，本质是就是长度不可变的可变的区别

    数组 Arrays 数组是内置(build-in)类型,是一组同类型数据的集合,它是值类型,通过从0开始的下标索引访问元素值.在初始化后长度是固定的,无法修改其长度.当作为方法的入参传入时将复制一份数 ...

  7. getElementByTagName的使用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 【POJ 3784】 Running Median

    [题目链接] http://poj.org/problem?id=3784 [算法] 对顶堆算法 要求动态维护中位数,我们可以将1-M/2(向下取整)小的数放在大根堆中,M/2+1-M小的数放在小根堆 ...

  9. bzoj4756

    http://www.lydsy.com/JudgeOnline/problem.php?id=4756 水题一枚...但是我写了一个小时...手贱打反查不出来... 就是每次线段树合并,先把自己的儿 ...

  10. 如何用css约束一个层不可见

    两种方式: 方式一:设置属性值为none不可见:display:none 这个属性改变了一个元素的显示效果.之前我有提到一点,假如元素使用了none值,那么元素直接干净利落的消失不见.你在右键审查元素 ...