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;
}

<body>
 <div id="header">头部</div>
 <div id="main">内容</div>
 <div id="footer">尾部</div>
</body>

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

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

效果

头部
内容
尾部

方向

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

body {
 display: flex;
 flex-direction: column; <!-- 默认是 flex-direction: row; -->
}

#header {
 background: #FF6A6A; 
 flex-grow:1;
}

#main {
 background: #C0FF3E; 
 flex-grow:3;
}

#footer {
 background: #00BFFF; 
 flex-grow:1;
}

<body>
 <div id="header">头部</div>
 <div id="main">内容</div>
 <div id="footer">尾部</div>
</body>

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

效果

头部
内容
尾部

位置

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

body {
 display: flex;
 flex-direction: column;
}

#header {
 background: #FF6A6A; 
 flex-grow:1;
 display: flex; <!-- 对齐或者空间分割之前,记得把容器设置成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; <!-- 水平居中 & 垂直居中 -->
}

<body>
 <div id="header">水平居中</div>
 <div id="main">垂直居中</div>
 <div id="main">水平居中 & 垂直居中</div>
</body>

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

效果

水平居中
垂直居中
水平居中 & 垂直居中

常用属性

  • flex-start从头开始。
  • flex-end从尾开始。
  • flex-center居中。

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

更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程