Menu
CoddyTech

flex-direction

Coddy CSS Flexbox:完整课程 课程的第 4 课,共 15 课。

flex-direction 属性定义了弹性项目的排列方向。

它接受四个值:

  • row:弹性项目从左到右排列。
  • row-reverse:弹性项目从右到左排列。
  • column:弹性项目从上到下排列。
  • column-reverse:弹性项目从下到上排列。

弹性容器的默认值是 row。

示例:

.container {
  display: flex;
  flex-direction: row-reverse;
}
challenge icon

挑战

简单

将给定弹性盒的方向设为 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 在线编辑器