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. TCP/IP协议详解内容总结（怒喷一口老血）

    TCP/IP协议(本文源自外部链接) TCP/IP不是一个协议,而是一个协议族的统称.里面包括IP协议.IMCP协议.TCP协议. 这里有几个需要注意的知识点: 互联网地址:也就是IP地址,一般为网络 ...

  2. web api使用JObject接收时，报“无法创建抽象类”错误

    https://bbs.csdn.net/topics/391952288 在下列函数中增加  ModelBinders.Binders.Add(typeof(JObject), new JObjec ...

  3. c语言格式化打印

    printf的格式化打印 unsigned int          -------------------     %u        打印无符号数 int          ----------- ...

  4. D2欧拉路，拓扑排序，和差分约束

    第一题:太鼓达人:BZOJ3033 题意:给出k,求一个最长的M位01串,使其从每一个位置向后走k个得到 的M个k位01串互不相同(最后一个和第一个相邻,即是一个环).输出 字典序最小的答案. 2 ≤ ...

  5. 输出JSON

    <?php header("Content-type: text/html; charset=utf-8"); $host = '数据库IP'; $dbname = '数据库 ...

  6. msvc命令行cl编译c程序问题及解决

    1.cmd命令行cl提示没有这玩意儿 装上Visual Studio之类 2.cl main.c提示缺dll everything搜dll所在路径,在环境配置PATH增加对应bin.IDE 3.cl ...

  7. docker从容器里面拷文件到宿主机或从宿主机拷文件到docker容器里面

    1.从容器里面拷文件到宿主机? 答:在宿主机里面执行以下命令 docker cp 容器名:要拷贝的文件在容器里面的路径       要拷贝到宿主机的相应路径 示例: 假设容器名为testtomcat, ...

  8. ceph储存的S3接口实现（支持断点续传）

    最近公司准备接ceph储存,研究了一番,准备用亚马逊的s3接口实现,实现类如下: /** * Title: S3Manager * Description: Ceph储存的s3接口实现,参考文档: * ...

  9. mysql(5.5)安装后忘记密码

    查看mysql安装的路径

  10. 微信小程序常见问题

    上拉加载与下拉刷新 https://blog.csdn.net/yelin042/article/details/71435628 微信小程序---报错:对应的服务器TLS为TLS 1.0,小程序要求 ...