<!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. 【Inno Setup】添加许可协议，并默认选中我同意按钮

      [Setup] ; xkfile.txt文件不能为空 LicenseFile=C:\Documents and Settings\Administrator\桌面\smqh\xkfile.txt ...

  2. Java并发之线程转储

    一.java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个线程转储可能包含一个单独的线程或者多个线程.在多线程环境中,比如J2EE应用服务器,将会有许多线 ...

  3. iOS Message from debugger: Terminated due to memory issue ~解决方法

    一.概念: /** 1.内存管理概念 2.查看其他技术分享结论 3.产生崩溃原因 4.解决方法以及思路 CSND: https://blog.csdn.net/shihuboke/article/de ...

  4. springmvc(二) ssm框架整合的各种配置

    ssm:springmvc.spring.mybatis这三个框架的整合,有耐心一步步走. --WH 一.SSM框架整合 1.1.整合思路 从底层整合起,也就是先整合mybatis与spring,然后 ...

  5. 解决ubuntu下IntelliJ IDEA无法锁定到启动器的问题

    参考:https://www.zhihu.com/question/31626161 在目录~/.local/share/applications 中找到以前的IDEA的.desktop文件,删掉即可

  6. Ubuntu 安装显卡驱动

    首先到英伟达的官网下载最新的驱动 然后,首先要卸载Ubuntu上已有的显卡驱动 $ sudo apt-get purge nvidia* 然后仅用Ubuntu自带的显卡驱动nouveau,不过我的16 ...

  7. Oracle分析函数-nulls first/nulls last

    select * from criss_sales; 通过rank().dense_rank().row_number()对记录进行全排列.分组排列取值但有时候,会遇到空值的情况,空值会影响得到的结果 ...

  8. 交换上的FLAPPING事件 (zhuan)

    今天在学校的一个三层交换上看到持续的日志信息: Host 00:E0:FC:09:BC:F9is flapping between fa0/x and fa0/y. 思科对此官方的解释是: Error ...

  9. Elasticsearch学习笔记——分词

    1.测试Elasticsearch的分词 Elasticsearch有多种分词器(参考:https://www.jianshu.com/p/d57935ba514b) Set the shape to ...

  10. SwipeToLoadLayout

    SwipeToLoadLayout SwipeToLoadLayout is a reusable pull-to-refresh and pull-to-load-more widget. Supp ...