MyException - 我的异常网
当前位置:我的异常网» Flex » Flexbox格局

Flexbox格局

www.MyException.Cn  网友分享于:2013-08-22  浏览:0次
Flexbox布局

Flexbox布局

刚开始接触flex布局的时候,只知道它可以用来使子元素水平垂直居中,代码最为简洁好用。

.container {
    display: flex;
    justify-content: center;
    align-items: center;    
}

当然不仅仅是居中问题,flexbox能做的事情大多,能够简单快速解决我们布局所遇到的问题,例如:

  • 可以轻松实现两列、多列布局自适应屏幕的大小,而无需设置块浮动
  • 如果元素容器没有足够的空间,无需重新计算每个子元素的宽度,就可以设置它们在同一行
  • 可以快速让子元素布局在一列,如小屏幕的时候
  • 可以让在子元素相对容器居上、下、左、右、中布局
  • 可以通过属性order随时改变元素出现的顺序,无需改变HTM结构,以便适应屏幕大小不同和设备差异
  • 如果元素容器设置百分比sui视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例

浏览器对最新规范flexbox的支持情况如下:

Flex布局概念

  • 弹性布局是指通过调整其内元素的宽高,从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间,或将其收缩来避免溢出。
  • flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联的流方向,而flex布局依赖于flex directions。

Flex container(Flex 容器)

1.flex container

  • display

    display: other values | flex | inline-flex

    其中1,2,3,4为div块

2.Orientation

  • flex-direction(设置flex容器的主轴方向,指定flex项目在flex容器中的排列方式,水平和纵向两种。)

    flex-direction: row | row-reverse | column | column-reverse
    row(默认值):主轴为水平方向,起点在左端。
    row-reverse:主轴为水平方向,起点在右端。
    column:主轴为垂直方向,起点在上端。
    column-reverse:主轴为垂直方向,起点在下端。

  • flex-wrap(默认不换行,设置了换行wrap/wrap-reverse后,子元素大小总和大于容器大小即换行)

    flex-wrap: nowrap | wrap | wrap-reverse
    nowrap(默认值):不换行
    wrap:伸缩容器多行显示
    wrap-reverse:和wrap相反

  • flex-flow: <‘flex-direction’> || <‘flex-wrap’>(缩写)

    flex-flow: row nowrap; /* default */

3.Alignment

  • justify-content(指定flex项目在flex容器沿着主轴在当前行的对齐方式。)

    justify-content: flex-start | flex-end | center | space-between | space-around 

    其中space-around的第一个Flex项目左边的间距和最后一个Flex项目右边的间距是其他相相邻flex项目之间间的一半。

  • align-items(指定flex项目在flex容器沿着侧轴在当前行的对齐方式。)

    align-items: flex-start | flex-end | flex-center | base-line | stetch

  • align-content(针对多行、当你设定flex-wrap: wrap;且容器侧轴大小空间不够)

    align-content: flex-start | flex-end | center | space-between | space-around | strecth

4.Flex容器无效属性

  • ::first-line || ::first-letter
  • column-*属性

Flex items(Flex 项目)

1.Ordering

  • order(改变某个flex-item在页面中出现的顺序,order值小的排在前面)

2.Alignment

  • align-self(单独设置某个flex-items的属性,覆盖align-items设置的样式)

    align-self: auto | flex-start | flex-end | flex-center | baseline | stretch

3.Flexibility

  • flex-grow

    flex-grow: <number>; /* default 0 */
    按比例划分空间,其中“3”块由1/8→2/8→6/8
  • flex-shrink(与grow相反)

    flex-shrink: <number>; /* default 1 */
  • flex-basis(定义项目占据主轴main size的空间)

    flex-basis: <length> | auto; /* default auto */

    下面这个 GIF 表示的是它和 width 属性是可以互换的。(但是不完全是这样)

    注意:flex-basis 和 width 不同的地方是,它是和 flex 坐标轴保持一致的,flex-basis是影响主轴上大小。

设置一定大小的flex-basis值后,改变主轴的方向

这个时候改变height,而不是width,flex-basis 根据 flex-direction 的不同会影响到 width 或者 height。

  • flex(默认值为0 1 auto)

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

测试所有属性

Flexbox Playground

实例

demo1:上面的效果demo
demo2:另一个博客结构例子

适用场景

弹性盒子布局主要适用于应用程序的组件及小规模的布局,而(新兴的)栅格布局则针对大规模的布局

拓展阅读

参考资料

文章评论

中美印日四国程序员比较
中美印日四国程序员比较
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
如何成为一名黑客
如何成为一名黑客
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
那些争议最大的编程观点
那些争议最大的编程观点
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
我是如何打败拖延症的
我是如何打败拖延症的
每天工作4小时的程序员
每天工作4小时的程序员
老程序员的下场
老程序员的下场
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我的丈夫是个程序员
我的丈夫是个程序员
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
Java程序员必看电影
Java程序员必看电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
程序员必看的十大电影
程序员必看的十大电影
为什么程序员都是夜猫子
为什么程序员都是夜猫子
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
编程语言是女人
编程语言是女人
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员和编码员之间的区别
程序员和编码员之间的区别
旅行,写作,编程
旅行,写作,编程
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
一个程序员的时间管理
一个程序员的时间管理
鲜为人知的编程真相
鲜为人知的编程真相
10个调试和排错的小建议
10个调试和排错的小建议
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员的鄙视链
程序员的鄙视链
代码女神横空出世
代码女神横空出世
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有