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. 快速增加sql数据

    declare @i int begin insert into dbo.w10test(Name) select Name from dbo.w10test end;

  2. android应用刷新系统多媒体库(增加or删除多媒体文件)

    系统:android4.4及其以上 功能:app中拍照, 并实现浏览.删除照片操作. 实现: 1.拍照,存储到指定路径path 2.通知系统多媒体数据库刷新数据. 主要使用MediaScannerCo ...

  3. 华硕电脑u盘启动及原来win8现在安装win7后找不到硬盘解决方法

    1.设置U盘启动 开机按F2进入BIOS,Security-Secure Boot Control设为Disabled , BOOT-Lunch CSM 设为Enabled 按F10保存. 重启按ES ...

  4. Codeforces Round #363 (Div. 2)A-D

    699A 题意:在一根数轴上有n个东西以相同的速率1m/s在运动,给出他们的坐标以及运动方向,问最快发生的碰撞在什么时候 思路:遍历一遍坐标,看那两个相邻的可能相撞,更新ans #include< ...

  5. 日志管理log4js的配置

    以前就是在app.js 直接用,今天把它抽出来了. log4js.json { "appenders": [ { "type":"console&qu ...

  6. 逻辑回归算法的原理及实现(LR)

    Logistic回归虽然名字叫"回归" ,但却是一种分类学习方法.使用场景大概有两个:第一用来预测,第二寻找因变量的影响因素.逻辑回归(Logistic Regression, L ...

  7. Excel与Word套打功能使用技巧及EXCEL数据处理成绩

    Excel与Word套打功能使用技巧 婚礼邀请友人参加,就需要写请柬.而且写请柬不但要求字写得端正,还不能有错别字,再加上邀请的朋友多,写请柬就是一个劳累活.这时我们利用Word的套打功能,就会让写请 ...

  8. 蚁群算法简介(part3: 蚁群算法之更新信息素)

    信息素的局部更新策略   每只蚂蚁在构造出一条从起点到终点的路径后,蚁群算法还要求根据路径的总长度来更新这条路径所包含的每条边上信息素的浓度(在旅行商问题中每座城市是图中的一个节点,城市两两间有一条边 ...

  9. [转]UE4 Blueprint编译过程

    Blueprint 编译概述   一.术语 Blueprint,像C++语言一下的,在游戏中使用前需要编译.当你在BP编辑器中,点击编译按钮时候,BP资源开始把属性和图例过程转换为一个类对象处理. 1 ...

  10. webpack详细配置讲解

    //常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...