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高级 ...
随机推荐
- 将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑
将形如:Oct 8, 2016 5:29:44 PM串转换成正常时间在真机上遇到的坑 /** * 根据传入字符串 * * @param str 传入的日期字符串 形如:Oct 8, 2016 5:29 ...
- linux思维导图
- CSU 1597 薛XX后代的IQ
Description 薛XX的低IQ是个令人头疼的问题,他的队友深受其害.幸运的是,薛XX非常有钱,所以他买了一些可以提高他的后代的IQ的药.这种药有三个属性,A,B和P.当薛XX使用这种药的时候, ...
- sdn
#!/usr/bin/env python #from mininet.cli import CLI #from mininet.link import Link #from mininet.net ...
- git使用ssh密钥
1.查看本地是否有密钥对,如果存在就删除cd ~/.sshid_dsa id_dsa.pub 2.重新生成密钥对ssh-keygen -t rsa -C "your_email@yourem ...
- Apache2.4权限配置(原创帖-转载请注明出处)
==================说在前面的话================= 1:这次实验使用的php项目是Discuz,Discuz的安装请参照:http://www.cnblogs.com/ ...
- https 单向认证和双向认证配置
HTTPS 是我们开发中经常用到的通信加密技术,能有效保护我们网络访问中的安全,本文主要讲解单向 和 双向 https 的配置.关于https 的实现原理在这里我就不赘述了,附上阮一峰老师的关于htt ...
- 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 ...
- ORACLE常用SQL优化hint语句
在SQL语句优化过程中,我们经常会用到hint,现总结一下在SQL优化过程中常见Oracle HINT的用法: 1. /*+ALL_ROWS*/ 表明对语句块选择基于开销的优化方法,并获得最佳吞吐量, ...
- SQL函数
1,字符串截取拼接 CONCAT(),'****');SUBSTRING_INDEX(c.context,'}',1);SUBSTRING_INDEX(a.task_context,':',-1) a ...