Flex 竖向布局 · 对齐

视频教程

Flex 竖向布局

通过 display:flex; flex-direction:column; 可以声明 flex 竖向布局（基于交叉轴）。

Flex 竖向布局对齐

通过 align-items 属性可以控制内部元素的交叉轴对齐方式，align-items 属性值的意义 :

stretch 默认值。元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
baseline 元素位于容器的基线上
inherit	从父元素继承该属性

布局示例

<!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 class="item">项目4</div>
</div>
<style type="text/css">
.flexBox{
	display:flex; 
	flex-direction:column; 
	width:900px; 
	background:#F8F8F8; 
	padding:10px; 
	box-sizing:border-box;
	align-items:center;
}
.item{
	background-color:aquamarine; 
	width:280px; height:100px; 
	text-align:center; 
	line-height:100px;
	margin:8px 0;
}
</style>
</body>
</html>