FlexBox标准及兼容写法速查表
FlexBox标准写法:
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>
|
上面三个属性的简写
|
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
|
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标准及兼容写法速查表的更多相关文章
- bash基本命令速查表
来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/languages/bash.sh ################ ...
- Bash中文速查表
最好用的中文速查表(Cheatsheet) 来源:https://github.com/skywind3000/awesome-cheatsheets 感谢网友们的贡献! ############## ...
- Git 命令速查表
Git 命令速查表 1.常用的Git命令 命令 简要说明 git add 添加至暂存区 git add-interactive 交互式添加 git apply 应用补丁 git am 应用邮件格式补丁 ...
- Git 常用命令速查表(图文+表格)
一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r ...
- GNU Emacs命令速查表
GNU Emacs命令速查表 第一章 Emacs的基本概念 表1-1:Emacs编辑器的主模式 模式 功能 基本模式(fundamental mode) 默认模式,无特殊行为 文本模式(text m ...
- vim基本命令速查表
来源:https://github.com/skywind3000/awesome-cheatsheets/blob/master/editors/vim.txt ################## ...
- Git命令速查表【转】
本文转载自:http://www.cnblogs.com/kenshinobiy/p/4543976.html 一. Git 常用命令速查 git branch 查看本地所有分支git status ...
- Git 常用命令速查表(图文+表格)【转】
转自:http://www.jb51.net/article/55442.htm 一. Git 常用命令速查 git branch 查看本地所有分支git status 查看当前状态 git comm ...
- 【译】Swift 字符串速查表
[译]Swift 字符串速查表 2015-12-18 10:32 编辑: suiling 分类:Swift 来源:CocoaChina翻译活动 10 5585 Swift字符串 招聘信息: iOS高级 ...
随机推荐
- 快速增加sql数据
declare @i int begin insert into dbo.w10test(Name) select Name from dbo.w10test end;
- android应用刷新系统多媒体库(增加or删除多媒体文件)
系统:android4.4及其以上 功能:app中拍照, 并实现浏览.删除照片操作. 实现: 1.拍照,存储到指定路径path 2.通知系统多媒体数据库刷新数据. 主要使用MediaScannerCo ...
- 华硕电脑u盘启动及原来win8现在安装win7后找不到硬盘解决方法
1.设置U盘启动 开机按F2进入BIOS,Security-Secure Boot Control设为Disabled , BOOT-Lunch CSM 设为Enabled 按F10保存. 重启按ES ...
- Codeforces Round #363 (Div. 2)A-D
699A 题意:在一根数轴上有n个东西以相同的速率1m/s在运动,给出他们的坐标以及运动方向,问最快发生的碰撞在什么时候 思路:遍历一遍坐标,看那两个相邻的可能相撞,更新ans #include< ...
- 日志管理log4js的配置
以前就是在app.js 直接用,今天把它抽出来了. log4js.json { "appenders": [ { "type":"console&qu ...
- 逻辑回归算法的原理及实现(LR)
Logistic回归虽然名字叫"回归" ,但却是一种分类学习方法.使用场景大概有两个:第一用来预测,第二寻找因变量的影响因素.逻辑回归(Logistic Regression, L ...
- Excel与Word套打功能使用技巧及EXCEL数据处理成绩
Excel与Word套打功能使用技巧 婚礼邀请友人参加,就需要写请柬.而且写请柬不但要求字写得端正,还不能有错别字,再加上邀请的朋友多,写请柬就是一个劳累活.这时我们利用Word的套打功能,就会让写请 ...
- 蚁群算法简介(part3: 蚁群算法之更新信息素)
信息素的局部更新策略 每只蚂蚁在构造出一条从起点到终点的路径后,蚁群算法还要求根据路径的总长度来更新这条路径所包含的每条边上信息素的浓度(在旅行商问题中每座城市是图中的一个节点,城市两两间有一条边 ...
- [转]UE4 Blueprint编译过程
Blueprint 编译概述 一.术语 Blueprint,像C++语言一下的,在游戏中使用前需要编译.当你在BP编辑器中,点击编译按钮时候,BP资源开始把属性和图例过程转换为一个类对象处理. 1 ...
- webpack详细配置讲解
//常见的Webpack配置文件var webpack = require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugi ...