css3 flex布局九宫格,CSS3 Flex布局

Flex 布局

Flex布局，也叫做弹性伸缩布局，这种布局方式，是为了兼容移动端的多屏幕而生的，很适合用于开发 响应式 的网站。

要理解Flex布局并不难，分为空间、方向、位置三点。

空间

代码

body {

display: flex;

}

#header {

background: #FF6A6A;

flex-grow:1;

}

#main {

background: #C0FF3E;

flex-grow:3;

}

#footer {

background: #00BFFF;

flex-grow:1;

}

头部

内容

尾部

display: flex; 把容器设置成一个Flex的盒子。

flex-grow 空间的划分，我们这里等比例分成了1、3、1三份。

效果

头部

内容

尾部

方向

根据空间默认规划出来的元素排版，是横向的，我们可以修改成纵向。

body {

display: flex;

flex-direction: column;

}

#header {

background: #FF6A6A;

flex-grow:1;

}

#main {

background: #C0FF3E;

flex-grow:3;

}

#footer {

background: #00BFFF;

flex-grow:1;

}

头部

内容

尾部

我们还可以反转顺序，把元素的顺序改成尾部、内容、头部。分别对应row-reverse和column-reverse。

效果

头部

内容

尾部

位置

位置主要是元素的一些对齐方式。

body {

display: flex;

flex-direction: column;

}

#header {

background: #FF6A6A;

flex-grow:1;

display: flex;

justify-content: center;

}

#main {

background: #C0FF3E;

flex-grow:3;

display: flex;

align-items: center;

}

#footer{

background: #00BFFF;

flex-grow:1;

display: flex;

justify-content: center; align-items: center;

}

水平居中

垂直居中

水平居中 & 垂直居中

Flex盒子里面，还可以在嵌套Flex盒子。配合空间、方向、位置的转换，就构成了我们整个复杂的页面。

效果

水平居中

垂直居中

水平居中 & 垂直居中

常用属性

flex-start从头开始。

flex-end从尾开始。

flex-center居中。

到这里，我们的CSS也结束了，学会了喵，下一篇是JS。