• order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-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项目属性(二)的更多相关文章

  1. 【转】VS项目属性的一些配置项的总结

    首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fangan,注意解决方案包括项目, ...

  2. VS项目属性配置实验过程

    (原创,转载注明出处:http://www.cnblogs.com/binxindoudou/p/4017975.html ) 一.实验背景 cocos2d-x已经发展的相对完善了,从项目的创建.编译 ...

  3. Flex 项目属性：flex 布局示例

    flex属性: flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto.后两个属性可选. 该属性有两个快捷值:auto (1 1 auto ...

  4. VS IDE 中Visual C++ 中的项目属性配置

    VS IDE 中Visual C++ 中的项目属性配置 一. Visual C++ 项目系统基于 MSBuild. 虽然可以直接在命令行上编辑 XML 项目文件和属性表,我们仍建议你使用 VS IDE ...

  5. VS项目属性的一些配置项的总结（important）

    以下内容为“原创”+“转载” 首先,解决方案和项目文件夹包含关系(c++项目): VS解决方案和各个项目文件夹以及解决方案和各个项目对应的配置文件包含关系,假设新建一个项目ssyy,解决方案起名fan ...

  6. VS2010 项目属性的默认包含路径设置方法

    VS2010 项目属性的默认包含路径设置方法 分类: c++小技巧2014-01-10 10:16 1358人阅读 评论(0) 收藏 举报 c++ 有两种方法可以设置vs2010的默认包含路径 方法一 ...

  7. ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

  8. Spring Boot 项目学习 (二) MySql + MyBatis 注解 + 分页控件 配置

    0 引言 本文主要在Spring Boot 基础项目的基础上,添加 Mysql .MyBatis(注解方式)与 分页控件 的配置,用于协助完成数据库操作. 1 创建数据表 这个过程就暂时省略了. 2 ...

  9. Kotlin开发springboot项目（二）

    Kotlin开发springboot项目(二) 中文学习网站: https://www.kotlincn.net/ 研究一下kotlin的demo: https://github.com/JetBra ...

随机推荐

  1. Light OJ 1032

    数位dp,许多数位dp需要统计某种模式(子串)出现的数量,这种题通常需要在递归参数中加入高位已经出现过的模式的数量. #include <cstdio> #include <cstr ...

  2. svn: Commit failed (details follow): svn: Authorization failed

    我的原因是我没有使用账户密码,匿名用户没有写权限,只有只读的权限 修改下svn配置文件中的anon-access=read为anon-access=write 还有一点要注意:选项前面不能留空格,必须 ...

  3. Java I/O模型的简单说明

    1.同步和异步 同步:如果有多个任务或者事件要发生,这些任务或者事件必须逐个地进行,一个事件或者任务的执行会导致整个流程的暂时等待,这些事件没有办法并发地执行,最简单的例子就是顺序的执行两个方法,当第 ...

  4. Linux集群配置ntp时间同步服务

    集群中时间不同步有可能会让大数据的应用程序运行混乱,造成不可预知的问题,比如Hbase,当时间差别过大时就会挂掉,所以在大数据集群中,ntp服务,应该作为一种基础的服务,以下在演示在CentOS 7. ...

  5. 【python】判断字符串日期是否有效

    来源: http://www.jb51.net/article/66014.htm http://www.runoob.com/python/att-time-strptime.html 用time模 ...

  6. java jsp调用shell（带参数）脚本并返回值

    test.jsp <%@ page language="java" import="java.util.List,java.util.ArrayList,java. ...

  7. C# webBrowser控件使用

    C# webBrowser控件使用心得 最近用到WebBrowser控件,遇到很多问题,也学习了不少新的东西.下面是我在C#下写的关于WebBrowser控件使用的代码. 1.WebBrowser常用 ...

  8. jvm学习

    一.jps主要用来输出JVM中运行的进程状态信息 jps [options] [hostid] 如果不指定hostid就默认为当前主机或服务器. Jps -ml 二.jstack主要用来查看某个Jav ...

  9. 从键盘输入成绩，找出最高分，并输出学生成绩等级。成绩>=最高分-10，为A，成绩>=最高分-20，为B，成绩>=最高分-30，为C,其余等级为D

    import java.util.Scanner;public class TestStudent { public static void main(String[] args) { //从键盘获得 ...

  10. ASCII 非打印字符

    项目出了问题,因为AscII非打印字符的原因,后来找了一下啊ASCII的非打印字符,总共有31个,然后我们直接全部替换成问号了. 解决方式为先找到非打印字符,这是我从网上找的非打印字符表: 进制 十六 ...