最近發(fā)現(xiàn)了兩個挺有意思的css小游戲,分別是學習flex布局和grid布局的,前一個叫FLEXBOX FROGGY,后者叫Grid Garden,在線補齊css屬性來通過關(guān)卡,也正好可以一邊放松一邊復習下相關(guān)的布局知識.
Grid Garden知識點
- 如何聲明Grid布局? display: grid; display: inline-grid;或者display: subgrid;
- grid-column-start和grid-column-end作用于網(wǎng)格項的開始結(jié)束,start不一定比end小,且都可以為負數(shù).
- 除了取數(shù)值外,還可以使用span關(guān)鍵字.格式是span <number>意思是跨越多少個網(wǎng)格軌道.
- 可以使用grid-column: <start>/<end>來簡寫, span關(guān)鍵字適用此縮寫.
- grid-area屬性可以再次簡寫,接收4個由/隔開的值,依次為:grid-row-start, grid-column-start, grid-row-end, grid-column-end.
- 存在屬性關(guān)鍵字:order,order類似于z-index表明疊放順序,數(shù)值越大,越在上.允許負數(shù).
- grid-template-columns和grid-template-rows用于設(shè)置Grid布局的行列中網(wǎng)格軌道的大小.
- repeat函數(shù)可以簡化多個同值,格式為repeat(N, value),其中N是個數(shù),value是值.repeat可以與其他值混用,如:grid-template-columns: repeat(N-1, value) value.
- 定義上述屬性時,允許長度單位混合使用.
- fr用于等分等分網(wǎng)格容器剩余空間.舉例說明:設(shè)有A B C三個網(wǎng)格軌道,他們的grid-template-columns的設(shè)置依次是1fr 2fr和3fr.那么他們共同把一個行分為6等分,則A B C的空間就依次獲得了這一行的1/6疯溺、2/6和3/6.
- fr是可以和其他單位混用的,如grid-template-columns:1fr 50px 1fr 1fr.計算優(yōu)先級記住一點即可:除了auto之外,先計算所有固定值(包括百分數(shù))后,剩下的空間再計算fr.
Flexbox Froggy知識點
- 如何聲明Flex布局? display: flex;
- justify-content屬性可以水平對齊元素,并且接受以下幾個參數(shù):
- flex-start: 元素和容器的左端對齊
- flex-end: 元素和容器的右端對齊
- center: 元素在容器里居中
- space-between:元素之間保持相等的距離
- space-around:元素周圍保持相等的距離
- align-items屬性可以縱向?qū)R元素
- flex-direction屬性性定義了元素在容器里擺放的方向,接受: row row-reverse column column-reverse
- 存在order來調(diào)整青蛙的順序,默認0,但是我們設(shè)置這個屬性為正數(shù)或負數(shù).
- 使用align-self控制單個元素,接受和align-items一樣的那些值.
- flex-wrap決定是否換行,接受 wrap nowrap wrap-reverse.
- align-content來決定行與行之間隔多遠,接受flex-start flex-end center space-between space-around stretch.
