flex意为"弹性布局"

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

首先上代码:

上面为flex的基础布局,效果如下:

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

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

基本已经明白了:

flex:1相当于 flex-grow:1flex-shrink:1 , flex-basis:0% (子元素宽度 = 父级宽度/3)

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

flex:none相当于flex-grow:0flex-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. ARM-ili9325屏调试1--时序

    2011-06-21 22:04:54 LCD连接好了,读id,不成功.说明配置引脚或读写时序不对. 原来是软件引脚配置出错. 应该用如下. #define LCD_CS   {3<<30 ...

  2. 【题解】JSOIWC2019 Round3

    题面 题解: T1: 先对图进行染色,重新对联通快重新建图 根据四色定理,珂以得出这实际是一颗树 因为树的中心肯定是最佳的决策,所以答案就是树的直径/2(上取整) #include <bits/ ...

  3. 使用python玩跳一跳亲测使用步骤详解

    玩微信跳一跳,测测python跳一跳,顺便蹭一蹭热度: 参考博文 使用python玩跳一跳超详细使用教程 WIN10系统,安卓用户请直入此: python辅助作者github账号为:wangshub. ...

  4. linux --- 6. 项目部署

    一.负载均衡 .准备三台机器,准备3台虚拟机,或者和俩同桌交流一下 192.168.226.128 是nginx资源服务器,返回页面的 192.168.226.129 用作nginx负载均衡服务器 1 ...

  5. luogu3426 [POI2005]SZA-Template 后缀树

    链接 bzoj不能auto https://www.luogu.org/problemnew/show/P3426 思路 这个要求的串一定是S的前缀和S的后缀. 转化一下 建立出来fail树(fail ...

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

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

  7. centos 打印机安装方法

    这里安装的是hplip 1.首先确定cups有没有安装 没有的话 yum install cups 安装 2.安装 hplip yum install -y hplip hplip-* 3执行 hp- ...

  8. linux存储管理之基本分区

    基本分区管理 ====================================================================================基本分区(MBR| ...

  9. Web版记账本开发记录(三)

    今天又理了一下思路,思路也越来越明了,越来越清晰了. 今天的开发还是比较顺利的,我通过学习了一些分页功能而且成功地应用在用户登录上,实现了管理员和普通用户之间不同的操作, 今天在用户登录上增加了用户权 ...

  10. ranch流程处理图

    ranch是开发服务端管理模板,这个模板不大,写的很经典,方便并发管理,而且性能很优秀~~ 其中比较优秀的就有cowboy~~ 看了一下ranch的源码(版本v1.2.1 下载链接https://gi ...