<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 400px;height: 400px;

            border: 1px solid red;

            display: flex;/*设置为伸缩的父元素*/

        }

        .dv1{

            width: 100px;height: 100px;/*宽度无效*/

            background: red;

            flex: 2;

        }

        .dv2{

            width: 100px;height: 100px;/*宽度无效*/

            background: blue;

            flex: 2;

        }

        .dv3{

            width: 100px;height: 100px;/*宽度无效*/

            background: yellow;

            flex: 1;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="dv1"></div>

        <div class="dv2"></div>

        <div class="dv3"></div>

    </div>

</body>

</html>

主要是用:

display:flex;

flex:1;/*宽度无效*/

css3 伸缩百分比的调整的更多相关文章

  1. css3伸缩布局中justify-content详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  3. CSS3 伸缩布局盒模型记

    CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...

  4. 使用CSS3伸缩盒实现图片垂直居中

    用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...

  5. css3的calc() css3的百分比减宽,减高,加,乘,除，适合用于后台的排版定位

    css3的calc() css3的百分比减宽,减高,加,乘,除,适合用于后台的排版定位 浏览器支持IE9+.FF4.0+.Chrome19+.Safari6+ calc()语法非常简单,就像我们小时候 ...

  6. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

  7. CSS3——伸缩布局及应用

    CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用. 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水 ...

  8. css3圆环百分比，菜单栏定位导航

    前段时间,社区个人中心改版,看了下设计图,当时隐约感觉到有两个地方(圆环百分比,菜单栏定位导航)比较麻烦.设计图大致如下: 首先看圆环百分比,网上的做法大致分两种,一种是用了CSS3中的transfo ...

  9. CSS3 伸缩布局盒模型

    CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...

随机推荐

  1. CentOS 6.5 x64下网络配置

    一.自动获取IP地址 #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,ip地址.MAC地址 [root@CentOS6 ~]# vi /etc/sysconfig/n ...

  2. 时间序列分解算法：STL

    1. 详解 STL (Seasonal-Trend decomposition procedure based on Loess) [1] 为时序分解中一种常见的算法,基于LOESS将某时刻的数据\( ...

  3. Python中的__name__和类

    1.   python中if __name__ == '__main__': 的解析 经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是 ...

  4. MySQL数据库的安装教程及相关问题

    MySQL数据库的安装教程及相关问题 2018-07-13 MySQL数据库的下载及安装教程 问题1:Authentication plugin 'caching_sha2_password' can ...

  5. [转]论SOA架构的几种主要开发方式

    面向服务架构soa以其独特的优势越来越受到企业的重视,它可以根据需求通过网络对松散耦合的粗粒度应用组件进行分布式部署.组合和使用.服务层是SOA的基础,可以直接被应用调用,从而有效控制系统中与软件代理 ...

  6. 资源查找器PathMatchingResourcePatternResolver的使用

    资源查找器PathMatchingResourcePatternResolver的使用 PathMatchingResourcePatternResolver是一个Ant通配符模式的Resource查 ...

  7. 视频编码---mjpeg

    http://www.eepw.com.cn/article/201612/333063.htm https://www.cnblogs.com/ikaka/p/4860858.html https: ...

  8. 自己动手在win2003系统中添加虚拟网卡

    运用虚拟网卡我们可以更好地使用我们的网络,那么在win2003中该怎么操作呢?下面就为大家介绍下具体的步骤   虚拟网卡是用软件来实现虚拟的网卡,通过运用虚拟网卡我们可以更好地使用我们的网络.但是虚拟 ...

  9. Houdini技术体系 基础管线（二） ：Heightfiled与UE4的无缝导入以及对World Composition的支持

    Authored by TraceYang 前言    传统的制作做比较真实大世界3D关卡地形时,通常的采用的方式是把HeightMap和SplatMap(Layer Mask)导入到引擎的地形系统里 ...

  10. PHP正则验证类

    项目中经常使用到的验证,很使用的.查看与下载<?php /** * 验证类 * * @lastmodify 2015-12-19 * @author wuheng */ class Verify ...