Skip to content

Instantly share code, notes, and snippets.

@stu01509

stu01509/Flexbox Froggy

Created September 22, 2018 14:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save stu01509/b96674eb9d2aafd6688f78745ab74e2b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save stu01509/b96674eb9d2aafd6688f78745ab74e2b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. stu01509 created this gist Sep 22, 2018.
    83 changes: 83 additions & 0 deletions Flexbox Froggy
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    第一關
    justify-content:flex-end;

    第二關
    justify-content:center;

    第三關
    justify-content:space-around;

    第四關
    justify-content:space-between;

    第五關
    align-items:flex-end;

    第六關
    justify-content:center;
    align-items:center;

    第七關
    justify-content:space-around;
    align-items:flex-end;

    第八關
    flex-direction:row-reverse;

    第九關
    flex-direction:column;

    第十關
    justify-content:flex-end;
    flex-direction:row-reverse;

    第十一關
    justify-content:flex-end;
    flex-direction:column;

    第十二關
    justify-content:space-between;
    flex-direction:column-reverse;

    第十三關
    justify-content:center;
    align-items:flex-end;
    flex-direction:row-reverse;

    第十四關
    order:1;

    第十五關
    order:-1;

    第十六關
    align-self:flex-end;

    第十七關
    align-self:flex-end;
    order:1;

    第十八關
    flex-wrap:wrap;

    第十九關
    flex-direction:column;
    flex-wrap:wrap;

    第二十關
    flex-flow:column wrap;

    第二十一關
    align-content:flex-start;

    第二十二關
    align-content:flex-end;

    第二十三關
    flex-direction:column-reverse;
    align-content:center;

    第二十四關
    flex-flow:column-reverse wrap-reverse;
    justify-content:center;
    align-content:space-between;