Appearance
中等难度
Level 8
青蛙们需要按照顺序到达各自颜色的睡莲上,这里需要使用 flex-direction
。这个 CSS 属性定义了元素在容器中的排列方向,它接受如下值:
row
: 元素横向排列。row-reverse
: 元素横向并逆向排列。column
: 元素纵向排列。column-reverse
: 元素纵向并逆向排列。
ANSWER
css
#pond {
display: flex;
flex-direction: row-reverse;
}
Level 9
青蛙们需要按照顺序到达各自颜色的睡莲上,这里需要使用 flex-direction
。这个 CSS 属性定义了元素在容器中的排列方向,它接受如下值:
row
: 元素横向排列。row-reverse
: 元素横向并逆向排列。column
: 元素纵向排列。column-reverse
: 元素纵向并逆向排列。
ANSWER
css
#pond {
display: flex;
flex-direction: column;
}
Level 10
使用 flex-direction
和 justify-content
帮助青蛙到他们各自的睡莲上。
提示,当你将行或列的方向设置为反向,开始(start)和结束(end)也会反向。
ANSWER
css
#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
css
#pond {
display: flex;
flex-direction: column;
justify-content: flex-end;
}
Level 12
使用 flex-direction
和 justify-content
帮助青蛙到他们各自的睡莲上。
ANSWER
css
#pond {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
Level 13
使用 flex-direction
、 justify-content
和 align-items
帮助青蛙到他们各自的睡莲上。
ANSWER
css
pond {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: flex-end;
}