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. sqlserver 空 处理

    NULL:没有对(列)变量输入数据 'NULL'字符串:是长度为4的字符串 空字符串:有对(列)变量输入数据,输入的数据为空字符串 select case lxdh when '' then '空' ...

  2. React高级教程（es6）——（1）JSX语法深入理解

    从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...

  3. 继上篇后的Excel批量数据导入

    上篇Excel动态生成模板,此篇将借用此模板进行Excel数据的批量导入. 说明:由于数据库中部分数据储存的是编码或者Id,因此,这里就需要用到上篇中的全局数据,判断是否有数据,有数据直接使用,没有数 ...

  4. react-router 4.0（一）

    import React from 'react'; import ReactDOM from 'react-dom' import {Link,Route,HashRouter} from 'rea ...

  5. 【BZOJ1485】有趣的数列

    Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所有的奇数项满足a1<a3<…&l ...

  6. Learning-Python【28】：基于TCP协议通信的套接字

    什么是 Socket Socket 是应用层与 TCP/IP 协议通信的中间软件抽象层,它是一组接口.在设计模式中,Socket 其实就是一个门面模式,它把复杂的 TCP/IP 协议族隐藏在 Sock ...

  7. 配置SAP GUI FOR HTML（通过WEB方式登录）

    配置SAP GUI FOR HTML(通过WEB方式登录) SAP系统可以通过安装 SAP GUI.SAP GUI FOR JAVA.SAP GUI WEB FOR JAVA.SAP GUI FOR ...

  8. rabbitMQ 的三种Exchange

    rabbitMQ 的Exchange有3种路由方式:  direct.fanout.topic ,以下为详细说明 1.  Direct Exchange 处理路由键.需要将一个队列绑定到交换机上,要求 ...

  9. iSCSI网络协议.学习笔记

    Internet SCSI(iSCSI)是一种网络协议,使用TCP/IP网络来传输SCSI协议.它是代替FC(Fibre Channel-based,光纤通道) SAN的很好选择.你可以在Linux下 ...

  10. erlang 笔记（06/03/02）

    1 .同时打开的端口数量限制(Open ports) erlang:system_info(port_limit)查询 可以通过环境变量ERL_MAX_PORTS修改,或者配置erlang启动参数(标 ...