Flex 布局挑战

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 49 课，共 76 课。

挑战

简单

现在你已经掌握了 Flexbox 的基础知识，包括 display: flex;、flex-direction、justify-content 和 align-items，是时候通过一项综合挑战来检验你的知识了。这个挑战将帮助你巩固对如何组合使用这些属性来创建灵活且响应式布局的理解。你将运用所学的各项属性，重现一种特定的设计。

现在有一份 HTML 文档，其中包含一个父级 <div>，里面有四个子级 <div>。你的任务是运用学过的 Flexbox 属性设置这些元素的样式，使其与下图所示的设计相符：

按照以下步骤操作：

编写一条 CSS 规则，用于选中带有 container 类的 <div> 元素。
将 .container 元素的 display 属性设为 flex，使其成为弹性容器。
将 .container 元素的 flex-direction 属性设为 row-reverse，让弹性项目从右向左排列成一行。
将 .container 元素的 justify-content 属性设为 space-between，让弹性项目均匀分布，并在它们之间留出空隙。
将 .container 元素的 align-items 属性设为 flex-end，让弹性项目沿交叉轴末端对齐。
编写 CSS 规则，为各个弹性项目（item1、item2、item3、item4）设置不同的背景颜色和尺寸（使用不同的内边距），如图所示。

亲手试试

<html>
<head>
    <title>Flex Box Challenge</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
        <div class="item4">Item 4</div>
    </div>
</body>
</html>