CSS flex-direction 属性
CSS flex-direction 属性
flex-direction
是 CSS3 引入的新属性,用于指定 flex 容器中 flex 项的主轴排列方向。主轴即是 flex 容器的排列方向,与之对应的是交叉轴。
该属性有 4 种可选值,分别为:
row
: 主轴为水平方向,起点在左端。row-reverse
: 主轴为水平方向,起点在右端。column
: 主轴为竖直方向,起点在上沿。column-reverse
: 主轴为竖直方向,起点在下沿。
语法
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
container
: 容器元素选择器row
:主轴方向为水平方向row-reverse
:主轴方向为水平方向,起点在右端column
:主轴方向为竖直方向column-reverse
:主轴方向为竖直方向,起点在下端
示例
以下示例展示了 flex-direction
不同取值下的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS flex-direction 属性示例</title>
<style>
.container {
display: flex;
border: 1px solid black;
height: 300px;
}
.item {
width: 100px;
height: 100px;
margin: 10px;
}
.item1 {
background-color: #f44336;
}
.item2 {
background-color: #4CAF50;
}
.item3 {
background-color: #2196F3;
}
.item4 {
background-color: #e91e63;
}
</style>
</head>
<body>
<h2>row</h2>
<div class="container" style="flex-direction: row;">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<h2>row-reverse</h2>
<div class="container" style="flex-direction: row-reverse;">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<h2>column</h2>
<div class="container" style="flex-direction: column;">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
<h2>column-reverse</h2>
<div class="container" style="flex-direction: column-reverse;">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
</div>
</body>
</html>
效果图如下:
从效果图可以看到,flex-direction 对应不同的取值时,flex 项的排列方向也随之改变。
总结
flex-direction
属性可以用于修改 flex 容器中 flex 项的排列方向。row
和row-reverse
的区别在于主轴的起点位置不同。column
和column-reverse
的区别在于交叉轴的起点位置不同。flex-direction
可以与其他 flex 相关属性一起使用,如 justify-content, align-items, align-self 等,共同控制 flex 容器的布局形式。