FlexBox标准写法:

支持浏览器: IE11,  Chrome29+, FireFox 20+, Safari加前缀 -webkit-
概述:
总的来说就是12个属性;
关于容器的6个,5个单一属性,分别定义了元素排列的方向, 行, 水平排列, 垂直排列, 空白分布, 和一个简写属性, 方向,行
关于容器内元素的6个, 5个单一属性, 分别定义元素的顺序, 伸展, 收缩, 初始尺寸, 对齐, 和一个简写属性 描述元素尺寸
 
container : display: flex | inline-flex;
说明
 flex-direction: row | column | row-reverse | column-reverse
元素在容器内的排列方向
flex-wrap: nowrap | wrap | wrap-reverse
元素一行或多行显示
flex-flow: <flex-direction> <flex-wrap>    default: <row nowrap>
上面两个属性的简写
justify-content: flex-start | flex-end | center | space-between | space-around
水平方向上, 元素在容器内的分布
align-items: stretch | flex-start | flex-end | center | baseline
垂直方向上,  元素在容器内的分布
align-content: stretch | flex-start | flex-end | center | space-between | space-around
在容器内, 额外的空白部分的分布
Container items :
 
 order<number> 0
元素在容器内的排列顺序
align-self: auto |  flex-start | flex-end | center | baseline | stretch 
覆盖align-items的值, 定义自身在垂直方向上的分布
flex-grow<number> 0
元素在容器内所占空间的伸展
flex-shrink<number> 1
元素在容器内所占空间的收缩
flex-basis<width> auto
初始化时, 元素在容器内的尺寸
flex: <flex-grow> <flex-shrink> <flex-basis>    <0  1  auto>
上面三个属性的简写
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
*以上<number>不支持负值;
*每个属性的第一个取值为默认值;
*蓝色为多个属性简写模式;
 
兼容IE10:加前缀 -ms- 
 
 display:-ms-flexbox | -ms-inline-flexbox;
standard   (橙色为item属性)
-ms-flex-direction :  row | column | row-reverse  | column-reverse 
flex-direction
-ms-flex-wrap none | wrap | wrap-reverse
flex-wrap
不支持
flex-flow
-ms-flex-pack  start | end |center | justify
justify-content
-ms-flex-align  stretch | start | end |center | baseline
align-items
-ms-flex-line-pack  start | end |center | baseline
align-content
-ms-flex-order   <number>
order
-ms-flex-item-align  stretch | start | end |center | baseline
align-self
-ms-flex <positive-flex> <negative-flex> <preferred-size> || none
flex : 0 0 auto
 
 
 
 
 
 
 
 
 
 
 
 
 
*IE10之前不建议使用,可以尝试用display:table;
 
关于Chrome,FireFox旧版本支持:
FireFox:把 -webkit- 换成 -moz- 即可
 
container : display: -webkit-flexbox | -webkit-inline-flexbox;
standard   (橙色为item属性)
-webkit-box-direction: normal | reverse

-webkit-box-orient: horizontal | vertical
flex-direction
不支持
flex-wrap
不支持
flex-flow
-webkit-box-pack: flex-start | flex-end | center | space-between | space-around
justify-content
不支持
align-content
-webkit-box-align: stretch | flex-start | flex-end | center | baseline
align-items
-webkit-box-ordinal-group:<number>
order
-webkit-box-flex<number> 1
flex-grow
-webkit-flex-shrink<number> 0
flex-shrink
-webkit-flex-basis<width> auto   (无-moz-)
flex-basis
-webkit-box: <flex-grow> <flex-shrink> <flex-basis>    <1  0  auto>
flex
不支持
align-self
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
参考:
兼容多浏览器的预定义写法:

FlexBox标准及兼容写法速查表的更多相关文章

  1. bash基本命令速查表

    来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/languages/bash.sh ################ ...

  2. Bash中文速查表

    最好用的中文速查表(Cheatsheet) 来源:https://github.com/skywind3000/awesome-cheatsheets 感谢网友们的贡献! ############## ...

  3. Git 命令速查表

    Git 命令速查表 1.常用的Git命令 命令 简要说明 git add 添加至暂存区 git add-interactive 交互式添加 git apply 应用补丁 git am 应用邮件格式补丁 ...

  4. Git 常用命令速查表(图文+表格)

    一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r ...

  5. GNU Emacs命令速查表

    GNU Emacs命令速查表 第一章  Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...

  6. vim基本命令速查表

    来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/editors/vim.txt ################## ...

  7. Git命令速查表【转】

    本文转载自:http://www.cnblogs.com/kenshinobiy/p/4543976.html 一. Git 常用命令速查 git branch 查看本地所有分支git status ...

  8. Git 常用命令速查表(图文+表格)【转】

    转自:http://www.jb51.net/article/55442.htm 一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git comm ...

  9. 【译】Swift 字符串速查表

    [译]Swift 字符串速查表 2015-12-18 10:32 编辑: suiling 分类:Swift 来源:CocoaChina翻译活动 10 5585 Swift字符串 招聘信息: iOS高级 ...

随机推荐

  1. 将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑

    将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑 /** * 根据传入字符串 * * @param str 传入的日期字符串 形如:Oct 8, 2016 5:29 ...

  2. linux思维导图

  3. CSU 1597 薛XX后代的IQ

    Description 薛XX的低IQ是个令人头疼的问题,他的队友深受其害.幸运的是,薛XX非常有钱,所以他买了一些可以提高他的后代的IQ的药.这种药有三个属性,A,B和P.当薛XX使用这种药的时候, ...

  4. sdn

    #!/usr/bin/env python #from mininet.cli import CLI #from mininet.link import Link #from mininet.net ...

  5. git使用ssh密钥

    1.查看本地是否有密钥对,如果存在就删除cd ~/.sshid_dsa id_dsa.pub 2.重新生成密钥对ssh-keygen -t rsa -C "your_email@yourem ...

  6. Apache2.4权限配置(原创帖-转载请注明出处)

    ==================说在前面的话================= 1:这次实验使用的php项目是Discuz,Discuz的安装请参照:http://www.cnblogs.com/ ...

  7. https 单向认证和双向认证配置

    HTTPS 是我们开发中经常用到的通信加密技术,能有效保护我们网络访问中的安全,本文主要讲解单向 和 双向 https 的配置.关于https 的实现原理在这里我就不赘述了,附上阮一峰老师的关于htt ...

  8. NetSuite SuiteScript 2.0 export data to Excel file(xls)

    In NetSuite SuiteScript, We usually do/implement export data to CSV, that's straight forward: Collec ...

  9. ORACLE常用SQL优化hint语句

    在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量, ...

  10. SQL函数

    1,字符串截取拼接 CONCAT(),'****');SUBSTRING_INDEX(c.context,'}',1);SUBSTRING_INDEX(a.task_context,':',-1) a ...