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. 知识点补充 set 深浅拷贝

    一 对前面知识点的补充 1.str中的join()方法是将列表转换成字符串 lst = ["韩雪","赵丽颖","黄渤","李连杰 ...

  2. 从数据库取出两个同样的字符串用equals比较返回false

    1. 从网上搜索原因,大概总结为三点 1.1 取数据的两个数据库编码不一样,需要统一编码 1.2 字符类型不一样,可能一个为nchar一个为varchar 1.3 从数据库取出的数据有空格,需要tri ...

  3. maven 执行testng.xml文件失败解决问题

    在pom.xml中配置了testng的依赖后,在surefire-plugin中又配置了suitexmlfiles指向testng.xml文件,但是使用mvn test运行时,没有运行testng.x ...

  4. Jenkins安装及配置

    Jenkins 简介 Jenkins 是一个开源项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.它的功能包括: 1.持续的 ...

  5. mysql常用的查询优化

    原文链接:https://www.jb51.net/article/39221.htm 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2 ...

  6. 《温故而知新》JAVA基础八

    集合接口与泛型 定义: 集合接口会操作一系列相同属性数据的对象类型的数据结构,类似于数组,但是相对于数组来说更显得高端大气 集合的接口分为Collention和Map两大类,不直接操作,而是通过子类的 ...

  7. EmailHelper

    注:个人邮箱发送时需要将邮箱密码设置为邮件授权码 邮件发送帮助类一: public class EmailHelper { /// <summary> /// 发送邮件 /// </ ...

  8. Mongo数据库操作/数据库版本号

    第一步,找到mongodb安装目录第二步,从命令行进入mongodb安装目录下的bin目录 附:http://www.runoob.com/mongodb/mongodb-create-databas ...

  9. java笔记 -- java运算

    运算符: 算术运算符: 加减乘除求余 + , - , * , / , % 当参与/运算的两个操作数都是整数时, 表示整数除法, 否则表示浮点除法. 例: 15 / 2 = 7; 15 % 2 = 1; ...

  10. spring-mvc默认首页配置

    一想到默认首页,很多人可能首先想到的是在web.xml如下配置: <welcome-file-list> <welcome-file>xxxx/xxx</welcome- ...