前两天朋友出去面试遇到了尴尬的问题，原题是："在一个盒子里包裹着三个子元素，让子元素的宽度以1：1、1：2、1：3的关系依次展示"

这就尴尬了啊..........................

这个的就是弹性盒里的东西

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

flex-grow         一个数字，规定项目将相对于其他灵活的项目进行扩展的量。（flex-grow 属性用于设置或检索弹性盒子的扩展比率，默认是0）

flex-shrink      一个数字，规定项目将相对于其他灵活的项目进行收缩的量。（默认值是1，）

flex-basis       项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。（说白了就是可以元素设定自定义的宽度）

简单操作了一下：看demo

HTML部分

style部分

Css3 里的弹性盒的比例关系的更多相关文章

  1. css3教程：弹性盒模型

    Css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeX ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 弹性盒模型

    CSS3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.弹性盒模型看起 ...

  3. 彻底弄懂css3的flex弹性盒模型

    由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求,所以一直以来对css3的弹性布局不是很感冒. 近日有幸在一篇文章中领略了flex的魅力--简洁优雅.随试之. /*容 ...

  4. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  5. 关于ie中实现弹性盒模型-我的css

    css3中的弹性盒模型大家都不陌生,但是能否在ie6中实现呢?第三方库中涉及到的页少之又少,也有一部分css框架中支持各种布局,下面给出我用的盒模型样式(为了以后copy方便而已): /******* ...

  6. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  7. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  8. 深入理解 CSS3 弹性盒布局模型

    Web 应用的样式设计中,布局是非常重要的一部分.布局用来确定页面上不同组件和元素的尺寸和位置.随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率.响应式用户界面设计中最 ...

  9. CSS3 弹性盒布局模型(转)

    简介 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进行排列. 对齐和分配空白空间.即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作.在该布局模型中,容器会根 ...

随机推荐

  1. ffmpeg基本功能使用

    任务描述:由给定图像序列合成 24fps 视频 方案一 直接对图像进行操作,适用于图像名比较规范且默认即为所需顺序 ffmpeg -f image2 -i ./images_crop_%d.png - ...

  2. Android电源管理基础知识整理

    前言 待机.睡眠与休眠的区别? Android开发者官网当中提到"idle states",该如何理解,这个状态会对设备及我们的程序造成何种影响? 进入Doze模式中的idle状态 ...

  3. 网络共享服务(一)之FTP

    网络共享服务:ftp,nfs,samba比较 从跨平台角度说, samba, ftp差不多, 而nfs不支持windows平台 从挂载角度说, samba, nfs可以把远程目录挂载到本地目录上, 对 ...

  4. vue项目中使用element ui上传图片到七牛

    1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...

  5. Thymeleaf的基本用法

    俗话说,不会前端的后端工程师不是一个合格的程序员.因为在项目中经常要和前端工程师打交道,并且偶尔也会涉及前端的简单开发,因此在闲暇之余学习了一点前端的知识,今天首先总结归纳一下 Thymeleaf 模 ...

  6. u盘变成Read-only file system

    先查看U盘的设备号,然后修改后重新挂载 fdisk -l sudo dosfsck -v -a /dev/sdb4  

  7. 实现字符串和从0到n-1范围内的数字串的一一对应---->poj1200

    #include<iostream> using namespace std; ; int num[maxn]; string s; int main() { int nc;//字符串s中 ...

  8. Pikachu-php反序列化

    在理解这个漏洞前,你需要先搞清楚php中serialize(),unserialize()这两个函数. 序列化serialize()序列化说通俗点就是把一个对象变成可以传输的字符串,比如下面是一个对象 ...

  9. aws申请ec2实例后如何用root用户登录

    ec2默认禁用root用户登录,我们创建ec2实例后如何知道使用什么用户登录,有两种方法? 方法一:根据我们选择的镜像来判断用什么用户登录:镜像:centos 用户centos镜像:aws 用户:ec ...

  10. MySQL的修改和删除数据表字段

    MySQL的修改和删除数据表字段 写在前面: 数据库存在的意义:数据存储和数据管理. 数据库:行(数据),列(字段) 注意:本页是解决了列的字段问题.下一页是解决行的数据问题. 注意,所有的字段名,最 ...