Flex布局:一种实现垂直水平居中的布局方案

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。

bg2015071002.png


bg2015071003.jpg

 
1、Flex布局是什么?
 
Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
 
.box{
display: flex;
}

//行内元素也可以使用Flex布局
.box{
display: inline-flex;
}

//Webkit内核的浏览器,必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}

//一种通用写法
.box{
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

-webkit-box-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;

-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
 
2、基本概念:
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。

bg2015071004.png

 
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
 
3、容器的属性:
 
以下6个属性设置在容器上。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

学习原文参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
 
 
 
已邀请:

要回复问题请先登录注册