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. 浮点数（double、float）的格式化问题及处理

    ---恢复内容开始--- 平时常会面临浮点数的格式处理问题,下面就举例说一说常见的问题及处理: 1,科学计数法问题 一个浮点数123456789.10,在打印的时候变成了1.234567891E8,处 ...

  2. oracle(3)

    存储过程: CREATE OR REPLACE PROCEDURE PROC_ABC ( currency IN NUMBER, aysdate IN DATE, money OUT number ) ...

  3. sublime Text 正则表达式功能使用介绍

    sublime Text 正则表达式功能使用介绍 1.打开sublime Text ,然后按 CTRL+H打开替换面板 2.如下图,勾选正则表达式功能,然后填上正则表达式和替换内容. 3.替换后结果如 ...

  4. bzoj3437 小P的牧场（斜率优化dp）

    3437: 小P的牧场 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 2025  Solved: 1110[Submit][Status][Discu ...

  5. Python 协程并发爬虫网页

    简单爬虫实例: 功能:通过urllib.request实现网站爬虫,捕获网站内容. from urllib import request def f(url): print("GET:%s& ...

  6. Java Web获取Web应用根路径

    最基本的 1,request.getRealPath("/");这个方法已不推荐用 2,在Servlet 里用this.getServletContext().getRealPat ...

  7. centos7中安装python3.7遇到的问题

    安装python3.7的步骤 wget   https://www.python.org/ftp/python/3.7.3/Python-3.7.3.tar.xz yum install -y gcc ...

  8. EPEL源-是什么全称

    EPEL源   EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适用于RHEL.CentOS和 ...

  9. 7.4 GRASP原则四：控制器 Controller

    4.GRASP原则四:控制器 Controller  What first object beyond the UI layer receives and co-ordinates (control ...

  10. Linux用户登录记录日志和相关查看命令汇总(转)

    # 1 utmp.wtmp.btmp文件 Linux用户登录信息放在三个文件中: 1 /var/run/utmp:记录当前正在登录系统的用户信息,默认由who和w记录当前登录用户的信息,uptime记 ...