flex-direction
Coddy CSS Flexbox:完整课程 课程的第 4 课,共 15 课。
flex-direction 属性定义了弹性项目的排列方向。
它接受四个值:
row:弹性项目从左到右排列。row-reverse:弹性项目从右到左排列。column:弹性项目从上到下排列。column-reverse:弹性项目从下到上排列。
弹性容器的默认值是 row。
示例:
.container {
display: flex;
flex-direction: row-reverse;
}挑战
简单将给定弹性盒的方向设为 column-reverse。
亲手试试
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>CSS Flexbox:完整课程中的所有课
自己练习: Web 在线编辑器