Skip to content

中等难度

Level 8

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

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

alt text

ANSWER

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

Level 9

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

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

alt text

ANSWER

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

Level 10

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

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

alt text

ANSWER

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

Level 11

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

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

alt text

ANSWER

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

Level 12

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

alt text

ANSWER

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

Level 13

使用 flex-directionjustify-contentalign-items 帮助青蛙到他们各自的睡莲上。

alt text

ANSWER

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

© thebestxt.cc
辽ICP备16009524号-8
本站所有文章版权所有,转载请注明出处