flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

<!-- 
# 弹性盒模型
- 注意在使用弹性盒模型的时候 父元素必须要加display:box 或 display:inline-box
    + 注意区别(设置box表现的像block, )
- Box-orient 定义盒模型的布局方向(定义在父元素上)
    + Horizontal 水平显示
    + vertical 垂直方向
- box-direction 元素排列顺序(定义在父元素上)
    + Normal 正序
    + Reverse 反序
- box-ordinal-group 设置元素的具体位置(定义在子元素上)
    + 相当于设置了优先级, 一个设置3, 一个设置6,6肯定排在3的前面


- Box-flex 定义盒子的弹性空间(定义在子元素上)
  + 子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和 
- box-pack 对盒子富裕的空间进行管理(定义在父元素上)
    + Start 所有子元素在盒子左侧显示,富裕空间在右侧
    + End 所有子元素在盒子右侧显示,富裕空间在左侧
    + Center 所有子元素居中
    + Justify 富余空间在子元素之间平均分布

- box-align 在垂直方向上对元素的位置进行管理(定义在父元素上)
    + Star 所有子元素在据顶
    + End 所有子元素在据底
    + Center 所有子元素居中
 -->

推荐阅读更多精彩内容

  • 参照阮一峰大神的文章flex布局教程语法篇:http://www.ruanyifeng.com/blog/2015...
    立的flag一直在倒阅读 107评论 0 0
  • 传统布局基于盒模型, 依赖 display属性+position属性+float属性. 它对于那些特殊布局非常不方...
    前端雨阅读 218评论 0 0
  • 作者:阮一峰文章源自:http://www.ruanyifeng.com/blog/2015/07/flex-gr...
    IT程序狮阅读 907评论 0 3
  • 【学习教材】阮一峰Flex布局教程(语法篇、实例篇)语法篇:http://www.ruanyifeng.com/b...
    shawnJ阅读 103评论 0 0
  • 写这篇文章的原因是:1、我很早就想写了;2、昨天面试阿里时,在面试结束的最后被尊敬的面试官随意问了一下displa...
    编程知识圈阅读 31,731评论 1 10
  • 我之所以称姐姐为长姐是因为有两个缘由。第一,姐姐在家里排行老大,称长姐是最为适宜的。第二,古语有云,长姐为母,是为...
    媒人2016阅读 443评论 0 0
  • 蓝黑色的天空上 缀满所有的星星 今夜无雨 雨是星空的泪 自从那个孩子来过 所有的雨水去了天上 照亮 他回家的路 德...
    钵罗树下阅读 157评论 11 5
  • redis系列文章:redis系列(一)- 安装与启动redis系列(二)- 语法与命令 一、简述 Redis支持...
    GitLqr阅读 1,656评论 0 6