基本概念

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. 【HDOJ3068】最长回文（manacher）

    题意:求一个由小写字母组成的字符串中的最长回文长度 cas<=120 n<=110000 思路:试manacher板子 ..]of char; p:..]of longint; ch:an ...

  2. qt自己定义搜索框（超简单，带效果图）

    1. 什么也不要说.先上效果图: 2. 代码 头文件: #ifndef APPSEARCHLINE_H #define APPSEARCHLINE_H #include <QLineEdit&g ...

  3. Linux下的应用程序开机自启动

    Linux下的应用程序开机自启动,目前我知道的有2种: 1.将启动语句写到/etc/rc.local 2.在init.d放置启动脚本 第一种,很简单,直接写进去就行,比如说: /db/mongodb/ ...

  4. singlefile.py

    #! encoding=utf-8 import os import os.path AllFiles = {} MinSize = 8100 def OneDir( DirName ): if Di ...

  5. tiny4412 裸机程序 七、重定位代码到DRAM【转】

    本文转载自:http://blog.csdn.net/eshing/article/details/37116637 一.关于DRAM 上一章我们讲解了如何对代码进行重定位,但是将代码重定位到只有25 ...

  6. new (C# Reference)

    https://msdn.microsoft.com/en-us/library/51y09td4.aspx In C#, the new keyword can be used as an oper ...

  7. mysql_mssql_access_2017年最新手机号段归属地数据库(17年4月更新)360569记录

    mysql,mssql,access 三种格式免费分享给大家,末尾有下载地址 2017年4月最新版手机号段归属地,也叫手机归属地数据库  共360569条记录,三种格式:MYSQL,MSSQL,acc ...

  8. 浅谈IO优化

    三层结构 磁盘(存储).VM(卷管理)和文件系统.专有名词不好理解,打个比方说:磁盘就相当于一块待用的空地:LVM相当于空地上的围墙(把空地划分成多个部分):文件系统则相当于每块空地上建的楼房(决定了 ...

  9. MySQL 1045登录失败(转)

    http://blog.csdn.net/bbirdsky/article/details/8134528# 当你登录MySQL数据库出现:Error 1045错误时(如下图),就表明你输入的用户名或 ...

  10. SpringBoot2.0整合SpringSecurity实现WEB JWT认证

    相信很多做技术的朋友都做过前后端分离项目,项目分离后认证就靠JWT,费话不多说,直接上干活(写的不好还请多多见谅,大牛请绕行) 直接上代码,项目为Maven项目,结构如图: 包分类如下: com.ap ...