felx项目属性(二)
orderflex-growflex-shrinkflex-basisflexalign-self
1.1 order
css order属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照order属性的值的增序进行布局。拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局。
<!DOCTYPE html>
<header>…</header>
<div id='main'>
<article>…</article>
<nav>…</nav>
<aside>…</aside>
</div>
<footer>…</footer>
#main { display: flex; }
#main > article { flex:; order:; }
#main > nav { width: 200px; order:; }
#main > aside { width: 200px; order:; }
1.2 flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
1.3 flex-shrink属性；
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
1.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
1.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
1.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
总结，顺序，放大缩小比例，主轴空间，简写，单个对其方式。这六点
参考网址：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
felx项目属性(二)的更多相关文章
- 【转】VS项目属性的一些配置项的总结
首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fangan,注意解决方案包括项目, ...
- VS项目属性配置实验过程
(原创,转载注明出处:http://www.cnblogs.com/binxindoudou/p/4017975.html ) 一.实验背景 cocos2d-x已经发展的相对完善了,从项目的创建.编译 ...
- Flex 项目属性：flex 布局示例
flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...
- VS IDE 中Visual C++ 中的项目属性配置
VS IDE 中Visual C++ 中的项目属性配置 一. Visual C++ 项目系统基于 MSBuild. 虽然可以直接在命令行上编辑 XML 项目文件和属性表,我们仍建议你使用 VS IDE ...
- VS项目属性的一些配置项的总结（important）
以下内容为“原创”+“转载” 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fan ...
- VS2010 项目属性的默认包含路径设置方法
VS2010 项目属性的默认包含路径设置方法 分类: c++小技巧2014-01-10 10:16 1358人阅读 评论(0) 收藏 举报 c++ 有两种方法可以设置vs2010的默认包含路径 方法一 ...
- ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪
ASP.NET MVC深入浅出(被替换) 一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...
- Spring Boot 项目学习 (二) MySql + MyBatis 注解 + 分页控件 配置
0 引言 本文主要在Spring Boot 基础项目的基础上,添加 Mysql .MyBatis(注解方式)与 分页控件 的配置,用于协助完成数据库操作. 1 创建数据表 这个过程就暂时省略了. 2 ...
- Kotlin开发springboot项目（二）
Kotlin开发springboot项目(二) 中文学习网站: https://www.kotlincn.net/ 研究一下kotlin的demo: https://github.com/JetBra ...
随机推荐
- Oracle10g下载地址--多平台下的32位和64位
前段时间ORACLE把10G的下载从官网拿掉了 ,许多童鞋不知道ORACLE 10g 的下载地址,这里我附上oracle 10g 下载的链接,方便大家下载. 点击链接使用迅雷即可下载. ...
- string literals may have at most 255 elements
一行中的字符超出 255 时候发生这个错误 解决方式: 一行的字符串分成两行 并 + 连接 **** 将字符串分成两个用"+"连接起来
- 手记-数学分析(高等数学)中有关算法效率的公式列举(O,Θ,Ω)
权当数据结构与算法分析的学习手记 系数为一的幂级数部分和公式 ∑ n2 = 12 + 22 + 32 + ... + n2 = n(n+1)(2n+1)/6 = O(n3) ∑ n3 = ...
- Java NIO 非阻塞Socket服务器构建
推荐阅读IBM developerWorks中NIO的入门教程,尤其是对块I/O和流I/O不太清楚的开发者. 说到socket服务器,第一反应是java.net.Socket这个类.事实上在并发和响应 ...
- nyoj138 找球号(二）_离散化
找球号(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 在某一国度里流行着一种游戏.游戏规则为:现有一堆球中,每个球上都有一个整数编号i(0<=i< ...
- windows编程中c语言知识回顾
1.include: #include表示只在系统提供的头文件中查找: #include "Head File"表示先在当前目录中搜索,若不存在,再到系统目录中查找: vs环境中, ...
- 使用WKWebView替换UIWebView
开发App的过程中,常常会遇到在App内部加载网页,通常用UIWebView加载.这个自iOS2开始使用的网页加载器一直是开发的心病:加载速度慢,占用内存多,优化困难.如果加载网页多,还可能因为过量占 ...
- css去掉iPhone、iPad默认按钮样式
原文链接:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 只要在样式里面加一句去掉css去掉iPhone.iPad的默认按钮样式就可以了!~ ...
- Rotate partitions in DB2 on z
Rotating partitions You can use the ALTER TABLE statement to rotate any logical partition to becom ...
- java 中的一个项目如何做到访问另一个项目的一个方法 或者 页面
两种方法:1.将一个项目打成jar包,第二个项目进行导入该jar包,就可以使用第一个项目里的类方法属性等2.将第一个项目发布出去,然后第二个项目调用,所谓发布出去就是开发远程接口,允许其他人调用.