中等难度

Level 8

青蛙们需要按照顺序到达各自颜色的睡莲上，这里需要使用 flex-direction。这个 CSS 属性定义了元素在容器中的排列方向，它接受如下值：

• row: 元素横向排列。
• row-reverse: 元素横向并逆向排列。
• column: 元素纵向排列。
• column-reverse: 元素纵向并逆向排列。

ANSWER

#pond {
    display: flex;
    flex-direction: row-reverse;       
}

Level 9

青蛙们需要按照顺序到达各自颜色的睡莲上，这里需要使用 flex-direction。这个 CSS 属性定义了元素在容器中的排列方向，它接受如下值：

• row: 元素横向排列。
• row-reverse: 元素横向并逆向排列。
• column: 元素纵向排列。
• column-reverse: 元素纵向并逆向排列。

ANSWER

#pond {
    display: flex;
    flex-direction: column;     
}

Level 10

使用 flex-direction 和 justify-content 帮助青蛙到他们各自的睡莲上。

提示，当你将行或列的方向设置为反向，开始(start)和结束(end)也会反向。

ANSWER

#pond {
    display: flex;
    flex-direction: row-reverse;    
    justify-content: flex-end;      
}

Level 11

使用 flex-direction 和 justify-content 帮助青蛙到他们各自的睡莲上。

提示，当 flex-direction 是 column 的时候，justify-content 设置的是垂直方向，align-items 设置的是水平方向。

ANSWER

#pond {
    display: flex;
    flex-direction: column;         
    justify-content: flex-end;      
}

Level 12

使用 flex-direction 和 justify-content 帮助青蛙到他们各自的睡莲上。

ANSWER

#pond {
    display: flex;
    flex-direction: column-reverse;     
    justify-content: space-between;     
}

Level 13

使用 flex-direction 、 justify-content 和 align-items 帮助青蛙到他们各自的睡莲上。

ANSWER

pond {
    display: flex;
    flex-direction: row-reverse;        
    justify-content: center;            
    align-items: flex-end;              
}