0513 flex、網站製作 === ## flex [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/) [FLEXBOX FROGGY](https://flexboxfroggy.com/) 有24關,教你怎樣使用 flex ### level 1. ![](https://i.imgur.com/Ur973zo.png =200x) ```htmlmixed= justify-content:flex-end; ``` ![](https://i.imgur.com/h1nnawe.png =200x) ### level 2. ![](https://i.imgur.com/bSMQPuV.png =200x) ```htmlmixed= justify-content:center; ``` ![](https://i.imgur.com/gQw1UVo.png =200x) ### level 3. ![](https://i.imgur.com/57mk4eG.png =200x) ```htmlmixed= justify-content:space-around; ``` ![](https://i.imgur.com/fk2zjCo.png =200x) ### level 4. ![](https://i.imgur.com/SERQW1j.png =200x) ```htmlmixed= justify-content:space-between; ``` ![](https://i.imgur.com/LlsEIJs.png =200x) ### level 5. ![](https://i.imgur.com/nwkFLim.png =200x) ```htmlmixed= align-items:flex-end; ``` ![](https://i.imgur.com/RPvM4bP.png =200x) ### level 6. ![](https://i.imgur.com/Fc8PbPg.png =200x) ```htmlmixed= justify-content:center; align-items:center; ``` ![](https://i.imgur.com/h5uHf6o.png =200x) ### level 7. ![](https://i.imgur.com/jEuvM5d.png =200x) ```htmlmixed= justify-content:space-around; align-items:flex-end; ``` ![](https://i.imgur.com/TNjxOMg.png =200x) ### level 8. ![](https://i.imgur.com/Eca6TLK.png =200x) ```htmlmixed= flex-direction:row-reverse; ``` ![](https://i.imgur.com/VetDcxR.png =200x) ### level 9. ![](https://i.imgur.com/ABlbK5j.png =200x) ```htmlmixed= flex-direction:column; ``` ![](https://i.imgur.com/Ha30pp6.png =200x) ### level 10. ![](https://i.imgur.com/8zVPnf3.png =200x) ```htmlmixed= flex-direction:row-reverse; justify-content:flex-end; ``` ![](https://i.imgur.com/u5CNvjM.png =200x) ### level 11. ![](https://i.imgur.com/sfLqRFb.png =200x) ```htmlmixed= flex-direction:column; justify-content:flex-end; ``` ![](https://i.imgur.com/Lbw7o51.png =200x) ### level 12. ![](https://i.imgur.com/QWdjmHG.png =200x) ```htmlmixed= flex-direction:column-reverse; justify-content:space-between; ``` ![](https://i.imgur.com/Rh8Fm8i.png =200x) ### level 13. ```htmlmixed= flex-direction:row-reverse; justify-content:center; align-items:flex-end; ``` ![](https://i.imgur.com/UpTVxmY.png =200x) ### level 14. ```htmlmixed= order:1; ``` ![](https://i.imgur.com/37A5cFj.png =200x) ### level 15. ```htmlmixed= order:-1; ``` ![](https://i.imgur.com/75qOgCi.png =200x) ### level 16. ```htmlmixed= align-self:flex-end; ``` ![](https://i.imgur.com/g3VEOcB.png =200x) ### level 17. ![](https://i.imgur.com/991QTU1.png =200x) ```htmlmixed= order: 1; align-self:flex-end; ``` ![](https://i.imgur.com/9nDqS6y.png =200x) ### level 18. ![](https://i.imgur.com/aYPnDK0.png =200x) ```htmlmixed= flex-wrap:wrap; ``` ![](https://i.imgur.com/MYRQpc1.png =200x) ### level 19. ![](https://i.imgur.com/vd9kTc3.png =200x) ```htmlmixed= flex-direction:column; flex-wrap:wrap; ``` ![](https://i.imgur.com/uxKouRl.png =200x) ### level 20. ![](https://i.imgur.com/jInh4L2.png =200x) ```htmlmixed= flex-flow: column wrap; ``` ![](https://i.imgur.com/gLreLtA.png =200x) ### level 21. ![](https://i.imgur.com/ZQ5GyvG.png =200x) ```htmlmixed= align-content: flex-start; ``` ![](https://i.imgur.com/jldMmMc.png =200x) ### level 22. ![](https://i.imgur.com/dBJyjBX.png =200x) ```htmlmixed= align-content:flex-end; ``` ![](https://i.imgur.com/PQ9PYve.png =200x) ### level 23. ![](https://i.imgur.com/jziFTyL.png =200x) ```htmlmixed= flex-direction:column-reverse; align-content:center; ``` ![](https://i.imgur.com/Pl0UuaC.png =200x) ### level 24. ![](https://i.imgur.com/JC5xhq3.png =200x) ```htmlmixed= flex-direction:column-reverse; flex-wrap:wrap-reverse; align-content:space-between; justify-content:center; ``` ![](https://i.imgur.com/Qkk2ve0.png =200x) ## 主題網站製作 * 製作方向 1.電影 2.品牌 3.景點 4.動物 參考版型網站： [Awwwards - Website Awards - Best Web Design Trends](https://www.awwwards.com/) ###### tags: `跨裝置企業平台與資料庫整合設計班`