flex意为"弹性布局"

这次主要探究的是flex:1与flex:auto的区别,flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。

首先上代码：

上面为flex的基础布局，效果如下：

下来看看：flex：1的效果：

再下来看看flex：auto的效果：

基本已经明白了：

flex：1相当于 flex-grow：1, flex-shrink:1 ， flex-basis：0% （子元素宽度 = 父级宽度/3）

flex：auto相当于flex-grow：1, flex-shrink:1 ， flex-basis：auto （子元素宽度 = 子元素宽度 +(父级宽度-子元素宽度之和/3）

flex：none相当于flex-grow：0, flex-shrink:0 ， flex-basis：auto

flex 1与flex auto的更多相关文章

  1. flex:1和flex:auto详解

    flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...

  2. 杂项：flex （adobe flex）

    ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...

  3. 重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

    1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...

  4. flex html 用flex展示html

    1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...

  5. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  6. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  7. Flex外包公司——Flex案例展示

    Flex案例展示 做的mail系统:  http://gowebtop.com/webtop/ 在线购书网站  http://book.orzar.net/ eBay购物网站  http://www. ...

  8. [Flex+JAVA]建立Flex+java项目，并实现基本功能

    1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型

  9. (转)Flex开发工具Flex Builder 3 下载及注册码

    本文转载自:http://blog.csdn.net/wlxtaking/article/details/5779762 Flex是通过java或者.net等非Flash途径,解释.mxml文件组织c ...

随机推荐

  1. Poj1258 Agri-Net （最小生成树 Prim算法 模板题）

    题目链接:http://poj.org/problem?id=1258 Description Farmer John has been elected mayor of his town! One ...

  2. Java内存模型学习笔记

    Java内存模型(JMM):描述了java程序中各种变量(线程共享变量)的范根规则,以及在JVM中将变量存储到内存和从内存中读取出变量这样的底层细节.共享变量就是指一个线程中的变量在其他线程中也是可见 ...

  3. [c/c++] programming之路（13）、函数

    一.函数 #include<stdio.h> //stdio.stdlib标准库 #include<stdlib.h> //代码重用, 函数的诞生,C语言主要是函数组成 //写 ...

  4. 单元测试系列之一：如何使用JUnit、JaCoCo和EclEmma提高单元测试覆盖率

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢!   原文链接:http://www.cnblogs.com/zishi/p/6726664.html -----如 ...

  5. Object.assign 的问题

    功能及问题 如下代码, 使用用户最后一次配置信息的同时,当用户关闭数据记录时提示用户确定关闭. export default { name: 'editPage', data() { return { ...

  6. JAVA基础知识笔记

    1.类只能用Public修饰,不能使用protected.private修饰.也可以不加修饰符,称做友好类. 2.类的实体元素包含成员变量和方法的定义,成员变量分为实例变量和类变量(static修饰的 ...

  7. Rancher2.0中使用外置NFS存储部署Nginx实验

    目录: 1.环境准备工作 1.1 准备好Rancher2.0集群环境 1.2 准备好外部NFS服务器 2.Rancher2.0中使用NFS存储的方法 2.1 在集群中创建持久卷(PV) 2.2 在项目 ...

  8. 『Python CoolBook』Cython

    github地址 使用Cython导入库的话,需要一下几个文件: .c:C函数源码 .h:C函数头 .pxd:Cython函数头 .pyx:包装函数 setup.py:python 本节示例.c和.h ...

  9. CRM INBOX 查询结果增强字段

    参考:https://blogs.sap.com/2013/03/25/how-to-integrate-new-result-list-attributes-into-the-agent-inbox ...

  10. html5（八） IndexedDB

    IndexedDB 是一个数据库系统,它在用户的计算机上存储索引信息. IndexedDB与传统的数据库不同.在IndexedDB中,数据库中的信息以对象的形式存储在对象库表中.对象库没有特定的结构, ...