关于“做游戏学习flex布局”的总结
回复数(0) 浏览数(24)
{{topic.upvote_count || 0}} 编辑 回复

第一关

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

第二关

#pond {
    display: flex;
    justify-content:center;
}

第三关

#pond {
    display: flex;
    justify-content:space-around;
}

第四关

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

第五关

#pond {
    display: flex;
    align-items:flex-end;
}

第六关

#pond {
    display: flex;
    justify-content:center;
    align-items:center;
}

第七关

#pond {
    display: flex;
    justify-content:space-around;
    align-items:flex-end;
}

第八关

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

第九关

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

第十关

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

第十一关

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

第十二关

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

第十三关

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

第十四关

#pond {
    display: flex;
}
.yellow {
    order:1
}

第十五关

#pond {
    display: flex;
}
.red {
    order:-1
}

第十六关

#pond {
    display: flex;
    align-items: flex-start;
}
.yellow {
    align-self:flex-end;
}

第十七关

#pond {
    display: flex;
    align-items: flex-start;
}
.yellow {
    order:1;
    align-self:flex-end;
}

第十八关

#pond {
    display: flex;
    flex-wrap:wrap;
}

第十九关

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

第二十关

#pond {
    display: flex;
    flex-flow:column wrap;
}

第二十一关

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
}

第二十二关

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
}

第二十三关

#pond {
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse;
    align-content:center;
}

第二十四关

#pond {
    display: flex;
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    justify-content:center;
    align-content:space-between;
}
{{topic.upvote_count || 0}}

第一关

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

第二关

#pond {
    display: flex;
    justify-content:center;
}

第三关

#pond {
    display: flex;
    justify-content:space-around;
}

第四关

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

第五关

#pond {
    display: flex;
    align-items:flex-end;
}

第六关

#pond {
    display: flex;
    justify-content:center;
    align-items:center;
}

第七关

#pond {
    display: flex;
    justify-content:space-around;
    align-items:flex-end;
}

第八关

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

第九关

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

第十关

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

第十一关

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

第十二关

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

第十三关

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

第十四关

#pond {
    display: flex;
}
.yellow {
    order:1
}

第十五关

#pond {
    display: flex;
}
.red {
    order:-1
}

第十六关

#pond {
    display: flex;
    align-items: flex-start;
}
.yellow {
    align-self:flex-end;
}

第十七关

#pond {
    display: flex;
    align-items: flex-start;
}
.yellow {
    order:1;
    align-self:flex-end;
}

第十八关

#pond {
    display: flex;
    flex-wrap:wrap;
}

第十九关

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

第二十关

#pond {
    display: flex;
    flex-flow:column wrap;
}

第二十一关

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-start;
}

第二十二关

#pond {
    display: flex;
    flex-wrap: wrap;
    align-content:flex-end;
}

第二十三关

#pond {
    display: flex;
    flex-wrap: wrap;
    flex-direction:column-reverse;
    align-content:center;
}

第二十四关

#pond {
    display: flex;
    flex-direction:column-reverse;
    flex-wrap:wrap-reverse;
    justify-content:center;
    align-content:space-between;
}
24
回复 编辑