Flex 基本概念

课程 : 《Flex 布局教程》

返回课程

视频教程

Flex 基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

主轴与交叉轴

容器默认存在两根轴 :

水平的主轴（main axis）和垂直的交叉轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；

交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

项目默认沿主轴 ( 水平方向 ) 排列。

单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

一个简单的示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="flexBox">
	<div class="item">项目1</div>
	<div class="item">项目2</div>
	<div class="item">项目3</div>
</div>
<style type="text/css">
.flexBox{
	display:flex; 
	flex-direction:row; 
	flex-wrap:nowrap; 
	width:900px; 
	background:#F8F8F8; 
	padding:10px; 
	box-sizing:border-box;
	justify-content:space-between;
}
.item{
	background-color:aquamarine; 
	width:280px; height:100px; 
	text-align:center; 
	line-height:100px;
}
</style>
</body>
</html>

其实学习 Flex 布局是非常简单的，了解了上面的基础再加上后面的属性学习，您就可以享用 flex 带来的便利了，请继续学习后面的章节。