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语法(摘抄)的更多相关文章

  1. Web App中的Flexbox应用

    虽然语法可能比较混杂,但 Flexbox 还是名不虚传的.它创造的是可伸缩的.有弹性的.可改变视觉顺序的智能盒子.它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置.使用盒模型来工作是非 ...

  2. HTML5和CSS3:游戏的变革Flexbox

    HTML5和CSS3给网络开发者提供了新的语法标签,本地动画工具,服务器端字体等等新增功能,这些并不是结束.开发者正苦于为网页设计挖出一条战壕 - 真正的页面排版工具,事实上,即便是最有前途的CSS3 ...

  3. 深入了解 Flexbox 伸缩盒模型

    Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...

  4. 【Markdown 语法】

    Markdown 语法 摘抄自MWEB Markdown 的设计哲学 Markdown 的目標是實現「易讀易寫」. 不過最需要強調的便是它的可讀性.一份使用 Markdown 格式撰寫的文件應該可以直 ...

  5. 旧版flexbox局部填坑

    本来昨晚要写一篇react的小笔记,恰好同学小聚的时候附近有个ios维修,把我的4s拿去修好,早上用我还是ios5.1系统的4s打开自己的页面,发现flexbox布局的部分是乱的,眼前一黑. what ...

  6. 潜入FLEXBOX——CSS弹性布局

    介绍 Flexbox是CSS3中的一种新的布局模式,旨在满足现代Web的更复杂的需求.本文将详细介绍新近稳定化的Flexbox语法.浏览器支持将迅速增长,因此,当支持范围足够使Flexbox实用时,您 ...

  7. 复习 | 彻底弄懂Flexbox之Demo篇

    flexbox之前有接触,写项目时也用过,但也只是简单的,对其也是似懂非懂,所以今天下定决心把这个再学一遍,因为似懂非懂就是不懂 本文主要是的demo演示,想看flexbox语法 请移步flexbox ...

  8. 推荐20个很有帮助的 Web 前端开发教程

    在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...

  9. 关于IE11

    最近,一个开发代号为Windows Blue的Windows操作系统泄漏到了互联网上,该操作系统的内置浏览器为IE11,本文将介绍一下这个泄漏版的IE11中有哪些关键的新变化和新特性. 预先声明: 本 ...

随机推荐

  1. Eclipse中JBOSS5.1无法启动的问题解决办法

    今天在Eclipse中启动JBoss 5.1时遇到这样的一个错误: …… ERROR [AbstractKernelController] Error installing to Instantiat ...

  2. UVa 10330 Power Transmission / 最大流

    最大流 这题有很多起点和终点 在取2个点(0和n+1) 作为唯一的起点和终点 此外每个点也有容量限制 建图时每条边上的容量为这条边和2个端的容量的最小值 然后EK就行 #include <cst ...

  3. C语言中给数组赋随机值

    srand和rand两个函数配合可以产生伪随机数序列.rand函数在产生随机数前,需要系统提供的生成伪随机数序列的种子,rand根据这个种子的值产生一系列随机数.如果系统提供的种子没有变化,每次调用r ...

  4. git gitk命令

    通过gitk命令,在单独的界面上查看项目源码在各个时间点上的代码提交情况. 各个commit 各个tag ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~` 更多详细的介绍 ...

  5. svn回滚版本1

    我刚开始使用SubVersion时, 想把svn代码库回滚到以前某个版本,  上网找来找去都找不到(那时文档比较少), 让我郁闷了好一阵子.  现在记录一下 SubVersion回滚的方法: 第一种方 ...

  6. Bootstrap技术: 模式对话框的使用

    一.概述 说到模式对话框,大家肯定都会想到windows下GUI程序,在gui程序中,有大量的对话框. 在web程序中,随着页面交互式功能的增多,有很多场景下也会用到对话框.在html原生的支持下,有 ...

  7. 清华集训2014 day2 task1 简单回路

    题目 如题. 算法 就是刚学习的插头DP. 从前往后和从后往前分别进行一次DP. 要点 合法的括号序列只有103个 如何合并两次dp的信息 一开始犯傻了,以为当且仅当两个轮廓线的状态相同才是合法的方案 ...

  8. qrcode 4.0.4 : Python Package Index

    qrcode 4.0.4 : Python Package Index qrcode 4.0.4 Download qrcode-4.0.4.tar.gz QR Code image generato ...

  9. 总线接口与计算机通信(三)UART起止式异步通用串行数据总线

    串口简介 1. 什么是串口? 串口是计算机上一种非常通用的设备通信的协议.串口通信的概念非常简单,串口按位(bit) 发送和接收字节.尽管比按字节(byte)的并行通信慢,但是串口可以在使用一根线发送 ...

  10. openssl生成pem,密钥证书的创建

    使用OpenSSL生成证书 首先得安装OpenSSL软件包openssl,安装了这个软件包之后,我们可以做这些事情: o Creation of RSA, DH and DSA Key Paramet ...