基本概念

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. [转]C++回调函数(callback)的使用

    原文地址:http://blog.sina.com.cn/s/blog_6568e7880100p77y.html 什么是回调函数(callback)    模块A有一个函数foo,他向模块B传递fo ...

  2. eclipse编译项目用maven编译问题

    1.eclipse只是个ide开发环境,并没有编译器功能.没有编译器.eclipse编译项目只是调jdk本地的java编译器.maven是单独编译,eclipse可以调用maven编译, 在eclip ...

  3. docker: 解决centos7下cgroup.procs: no such device的错误

    在centos7下,运行docker run的时候会发生cgroup.procs: no such device的错误,解决方法是编辑 /lib/systemd/system/docker.servi ...

  4. 在Ubuntu平台上创建Cordova Camera HTML5应用

    在这篇文章中,我们将具体介绍怎样使用Cordova Camera HTML5 应用.很多其它关于Cordova的开发指南,开发人员能够參考文章"the Cordova Guide" ...

  5. python-pexpect_02ssh

    #!/usr/bin/env python """ This runs a command on a remote host using SSH. At the prom ...

  6. LeetCode 350. Intersection of Two Arrays II （两个数组的相交之二）

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  7. MapReduce02

    ====================== MapReduce实现 ====================== Input: 一系列key/value对 用户提供两个函数实现: map(k,v) ...

  8. bootstrap table load数据

    直接load数据: $("#button").click(function(){ var name=$("input[name='name']").val(); ...

  9. SPOJ XMAX - XOR Maximization

    XMAX - XOR Maximization Given a set of integers S = { a1, a2, a3, ... a|S| }, we define a function X ...

  10. linux 网络编程-基础篇01

    #Socket简介 是一个编程接口是一种特殊的文件描述符(everything in Unix is a file)并不仅限于TCPIP协议面向连接(Transmission Control Prot ...