flexbox语法(摘抄)
flex
容器上的属性:
flex-direction: row | row-reverse | column | column-reverse (项目的排列方向)

flex-wrap : nowrap | wrap | wrap-reverse (换行情况)



flex-flow : <flex-direction> || <flex-wrap> ( flex-direction属性和flex-wrap属性的简写形式)
justify-content : flex-start | flex-end | center | space-between | space-around(主轴对齐方向)

align-items : flex-start | flex-end | center | baseline | stretch(交叉轴上如何对齐)

align-content :(flex-start | flex-end | center | space-between | space-around | stretch属性定义了多根轴线的对齐方式)

项目的属性:
order : <integer> (项目的排列顺序。数值越小,排列越靠前,默认为0)

flex-grow : <number> (项目的放大比例,默认为0,即如果存在剩余空间,也不放大。)

flex-shrink : <number>(项目的缩小比例,默认为1,即如果空间不足,该项目将缩小)

flex-basis : <length> | auto(在分配多余空间之前,项目占据的主轴空间)
flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ](flex-grow, flex-shrink 和 flex-basis的简写)
align-self: auto | flex-start | flex-end | center | baseline | stretch(允许单个项目有与其他项目不一样的对齐方式)

出处:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flexbox语法(摘抄)的更多相关文章
- Web App中的Flexbox应用
虽然语法可能比较混杂,但 Flexbox 还是名不虚传的.它创造的是可伸缩的.有弹性的.可改变视觉顺序的智能盒子.它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置.使用盒模型来工作是非 ...
- HTML5和CSS3:游戏的变革Flexbox
HTML5和CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束.开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便是最有前途的CSS3 ...
- 深入了解 Flexbox 伸缩盒模型
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...
- 【Markdown 语法】
Markdown 语法 摘抄自MWEB Markdown 的设计哲学 Markdown 的目標是實現「易讀易寫」. 不過最需要強調的便是它的可讀性.一份使用 Markdown 格式撰寫的文件應該可以直 ...
- 旧版flexbox局部填坑
本来昨晚要写一篇react的小笔记,恰好同学小聚的时候附近有个ios维修,把我的4s拿去修好,早上用我还是ios5.1系统的4s打开自己的页面,发现flexbox布局的部分是乱的,眼前一黑. what ...
- 潜入FLEXBOX——CSS弹性布局
介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...
- 复习 | 彻底弄懂Flexbox之Demo篇
flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...
- 推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
- 关于IE11
最近,一个开发代号为Windows Blue的Windows操作系统泄漏到了互联网上,该操作系统的内置浏览器为IE11,本文将介绍一下这个泄漏版的IE11中有哪些关键的新变化和新特性. 预先声明: 本 ...
随机推荐
- 找球号(一)(hask表)
找球号(一) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 在某一国度里流行着一种游戏.游戏规则为:在一堆球中,每个球上都有一个整数编号i(0<=i<= ...
- 华为s5700 添加与删除vlan
新建vlan 删除vlan ① 检查该VLAN下是否存在成员接口,使用如下命令:display vlan all② 如存在成员接口,则进入该接口视图,删除该成员,否则可略过此步骤,例如:interfa ...
- 边框圆角化方式(原文链接http://www.cnblogs.com/SJP666/p/4678730.html)
第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...
- 一天一个类,一点也不累之TreeSet
一天一个类,一点也不累. 现在要说的是---TreeSet public class TreeSet<E> extends AbstractSet<E> implements ...
- 开源OCR光学字符识别
纸张在 许多地方已日益失宠,无纸化办公谈论40多年,办公环境正限制纸山的生成.而过去几年,无纸化办公的概念发生了显着的转变.在计算机软件的帮助 下,包含大量重要管理数据和资讯的文档可以更方便的以电子形 ...
- Kivy: Crossplatform Framework for NUI
Kivy: Crossplatform Framework for NUI ivy - Open source Python library for rapid development of appl ...
- Hadoop在Windows下的安装配置
由于本人近期近期一段时间 都在学习Hadoop,接触了比較多的理论,可是想要深入的去学习Hadoop整个平台,那就必须实战的训练,首先第一步,当然是先搭建好一个Hadoop平台为先.可是比較坑爹的是. ...
- Bernstein polynomials
Bernstein多项式能够用来一致逼近闭区间上的连续函数. 对于[0,1]上的连续函数f(x),定义Bernstein多项式 B_n(f,x) = sum{k=0..n} f(k/n)C(k,n)t ...
- Ch02 从零开始实例学习6
演练:理解Edit方法和Edit视图 原文链接:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/exam ...
- android怎样实现自动点击功能
一个按钮之类的控件的自动点击的话,可以定时调用 button.performClick();