flex 1与flex auto
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的更多相关文章
- flex:1和flex:auto详解
flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...
- 杂项:flex (adobe flex)
ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...
- 重新总结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 ...
- flex html 用flex展示html
1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- Flex外包公司——Flex案例展示
Flex案例展示 做的mail系统: http://gowebtop.com/webtop/ 在线购书网站 http://book.orzar.net/ eBay购物网站 http://www. ...
- [Flex+JAVA]建立Flex+java项目,并实现基本功能
1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型
- (转)Flex开发工具Flex Builder 3 下载及注册码
本文转载自:http://blog.csdn.net/wlxtaking/article/details/5779762 Flex是通过java或者.net等非Flash途径,解释.mxml文件组织c ...
随机推荐
- ARM-ili9325屏调试1--时序
2011-06-21 22:04:54 LCD连接好了,读id,不成功.说明配置引脚或读写时序不对. 原来是软件引脚配置出错. 应该用如下. #define LCD_CS {3<<30 ...
- 【题解】JSOIWC2019 Round3
题面 题解: T1: 先对图进行染色,重新对联通快重新建图 根据四色定理,珂以得出这实际是一颗树 因为树的中心肯定是最佳的决策,所以答案就是树的直径/2(上取整) #include <bits/ ...
- 使用python玩跳一跳亲测使用步骤详解
玩微信跳一跳,测测python跳一跳,顺便蹭一蹭热度: 参考博文 使用python玩跳一跳超详细使用教程 WIN10系统,安卓用户请直入此: python辅助作者github账号为:wangshub. ...
- linux --- 6. 项目部署
一.负载均衡 .准备三台机器,准备3台虚拟机,或者和俩同桌交流一下 192.168.226.128 是nginx资源服务器,返回页面的 192.168.226.129 用作nginx负载均衡服务器 1 ...
- luogu3426 [POI2005]SZA-Template 后缀树
链接 bzoj不能auto https://www.luogu.org/problemnew/show/P3426 思路 这个要求的串一定是S的前缀和S的后缀. 转化一下 建立出来fail树(fail ...
- docker从容器里面拷文件到宿主机或从宿主机拷文件到docker容器里面
1.从容器里面拷文件到宿主机? 答:在宿主机里面执行以下命令 docker cp 容器名:要拷贝的文件在容器里面的路径 要拷贝到宿主机的相应路径 示例: 假设容器名为testtomcat, ...
- centos 打印机安装方法
这里安装的是hplip 1.首先确定cups有没有安装 没有的话 yum install cups 安装 2.安装 hplip yum install -y hplip hplip-* 3执行 hp- ...
- linux存储管理之基本分区
基本分区管理 ====================================================================================基本分区(MBR| ...
- Web版记账本开发记录(三)
今天又理了一下思路,思路也越来越明了,越来越清晰了. 今天的开发还是比较顺利的,我通过学习了一些分页功能而且成功地应用在用户登录上,实现了管理员和普通用户之间不同的操作, 今天在用户登录上增加了用户权 ...
- ranch流程处理图
ranch是开发服务端管理模板,这个模板不大,写的很经典,方便并发管理,而且性能很优秀~~ 其中比较优秀的就有cowboy~~ 看了一下ranch的源码(版本v1.2.1 下载链接https://gi ...