flex布局練習
（ 發現了一個有趣的網站，覺得還不錯，記錄下來推薦安利給大家，如果覺得自己flex布局不太熟練的話，可以來練習強化一下）
描述
- 練習名字：Flexbox Defense
- 練習地址：http://www.flexboxdefense.com/
- 練習描述：是個塔防游戲，通過用css 利用flex布局操作炮臺位置 達到練習flex布局 的效果；共12關，
- 練習前必讀：這個練習專案是對flex布局有點了解但用的很生疏的人群；如果對于flex布局完全不了解的，可以先去看 阮一峰 大佬關于flex的博客再來練習鞏固，大佬博客地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
塔防游戲圖片
(第一關) 圖片如下
每一關的答案
（再備上貼心的參考答案，注意：答案不唯一）
先自己寫，再看答案對比哦
- 第一關
.tower-group-1 {
display: flex;
justify-content:center;
}
- 第二關
.tower-group-1 {
display: flex;
justify-content:flex-end;
}
.tower-group-2 {
display: flex;
justify-content:center;
}
.tower-group-3 {
display: flex;
justify-content:flex-end;
}
- 第三關
.tower-group-1 {
display: flex;
justify-content:center;
}
.tower-group-2 {
display: flex;
justify-content:space-between;
}
- 第四關
.tower-group-1 {
display: flex;
align-items:flex-end;
}
.tower-group-2 {
display: flex;
align-items:flex-end;
}
- 第五關
.tower-group-1 {
display: flex;
justify-content:space-around;
align-items:flex-end;
}
.tower-group-2 {
display: flex;
justify-content:center;
}
.tower-group-3 {
display: flex;
justify-content:center;
align-items:center;
}
- 第六關
.tower-group-1 {
display: flex;
justify-content:space-between;
align-items:center;
}
- 第七關
.tower-group-1 {
display: flex;
flex-direction:column;
}
.tower-group-2 {
display: flex;
flex-direction:column;
}
- 第八關
.tower-group-1 {
display: flex;
flex-direction:column;
}
.tower-group-2 {
display: flex;
flex-direction:column;
align-items:center;
}
- 第九關
.tower-group-1 {
display: flex;
flex-direction:row-reverse;
justify-content:space-around;
}
.tower-group-2 {
display: flex;
flex-direction:row-reverse;
justify-content:space-around;
align-items:center;
}
- 第十關
.tower-group-1 {
display: flex;
justify-content:space-around;
}
.tower-1-1 {
}
.tower-1-2 {
order:10;
}
.tower-1-3 {
}
.tower-group-2 {
display: flex;
justify-content:space-around;
}
.tower-2-1 {
}
.tower-2-2 {
order:-1;
}
.tower-2-3 {
}
- 第十一關
.tower-group-1 {
display: flex;
justify-content:space-between;
}
.tower-1-1 {
align-self:flex-end;
}
.tower-1-2 {
}
.tower-1-3 {
align-self:flex-end;
}
.tower-1-4 {
}
- 第十二關
.tower-group-1 {
display: flex;
justify-content:space-between;
align-items:center;
}
.tower-1-1 {
align-self:flex-start;
}
.tower-1-2 {
}
.tower-1-3 {
order:10;
}
.tower-1-4 {
}
.tower-1-5 {
order:20;
align-self:flex-end;
}
目前共12關，答案不唯一，也許你寫出來的比我的還要簡單
(｡･?･)ﾉﾞ 如果覺得還不錯 ，記得點贊 收藏，感謝 ！前端的路上，我們一起加油 (￣︶￣*))
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/274865.html
標籤：其他
上一篇：浮生游記-拉薩篇