html5弹性布局两行三列,CSS3弹性布局和多列布局

弹性盒子基础

弹性盒子(Flexible Box)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。

定义一个弹性盒子

在父盒子上定义display属性：

#box{

display: -webkit-flex; //webkit内核浏览器的兼容设置，下同

display: flex;

}

当然还有行内布局的弹性盒子

#box{

display: -webkit-inline-flex;

display: inline-flex;

}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

弹性盒子兼容情况

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+ (prefixed with -webkit-)

Android 4.4+

iOS 7.1+ (prefixed with -webkit-)

弹性盒子概念

弹性盒子两个轴如图：

主轴(横轴, main axis)

交叉轴(纵轴, cross axis)

弹性盒子属性

在研究具体属性前，先建立一个基本模板，必要时修改一下部分参数：

1

2

3

4

5

#flex-box{

width: 200px;

height: 200px;

border: 1px solid #06f;

display: flex;

display: -webkit-flex;

}

.flex-item{

height: 30px;

width: 30px;

color: #f00;

font-size: 20px;

line-height: 30px;

text-align: center;

background-color: #8f0;

border: 1px solid #f00;

}

flex-direction

排列方向设置

#flex-box{

flex-direction: row | row-reverse | column | column-reverse;

/* @value row 从左到右(默认)*/

/* @value row-reverse 从右到左*/

/* @value column 从上到下*/

/* @value column-reverse 从下到上*/

}