第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

?self

justify-self

--設(shè)置行軸方向的對齊方式

語法

justify-self: start | end | center | stretch;

align-self

--設(shè)置列軸方向的對齊方式

align-self:start | end | center | stretch;

grid-area

--給grid item 進(jìn)行命名以便于使用grid-template-areas屬性創(chuàng)建模版時來進(jìn)行引用

語法

grid-area:<name> | <row-start> / <column-start> /? <row-end> / <column-end>;

參數(shù)說明

<name>:grid-template-areas中定義的命名。

<row-start> / <column-start> /? <row-end> / <column-end>:可以是數(shù)字，也可以是網(wǎng)格線的名字。

簡寫start-end

grid-column/row-start/end

--使用特定的網(wǎng)格線確定grid item在網(wǎng)格內(nèi)的位置

參數(shù)說明

<line>:可以是一個數(shù)字來指定相應(yīng)編號的網(wǎng)格線，也可使用名稱指代相應(yīng)命名的網(wǎng)格線

span <number>:網(wǎng)格項(xiàng)將跨越指定數(shù)量的網(wǎng)格軌道

span <name>:網(wǎng)格項(xiàng)將跨越一些軌道，直到碰到指定命名的網(wǎng)格線，必須結(jié)合start使用才有效，單獨(dú)使用無效。

auto:自動布局，或則自動跨越，或則跨越一個默認(rèn)的軌道

注意

1，如果沒有聲明grid-column-end/grid-row-end,默認(rèn)情況下，該網(wǎng)格項(xiàng)將跨越1個軌道。

2，網(wǎng)格項(xiàng)可以相互重疊，可以直接使用z-index來控制它們的堆疊順序

minmax()

--定義了一個長寬范圍的閉區(qū)間

語法

minmax([<length> | <percentage> | <flex> | min-content | max-content | auto | ],[<length> | <percentage> | <flex> | min-content | max-content | auto);

參數(shù)說明

flex:單位為fr的非負(fù)維度，指定軌道彈性布局的系數(shù)值。

min-content:自適應(yīng)內(nèi)容最大的那個單元格

max-content:自適應(yīng)內(nèi)容最小的那個單元格

auto:作為最大值，等價于max-content.作為最小值時，它表示軌道中單元格最小寬度（由min-width/min-height）的最大值。

fit-content()

--根據(jù)公式Min(最大大小，最大值（最小大小，參數(shù)）)將給定大小夾緊為可用大小

語法

grid-template-columns:fit-content(<length> | <percentage>);

grid-template-rows:fit-content(<length> | <percentage>);

?

repeat()

--跟蹤列表的重復(fù)片段，允許大量顯示重復(fù)模式的列或行以更緊湊的形式編寫

語法

grid-template-columns:repeat(repeat,values);

grid-template-rows:repeat(repeat,values);

參數(shù)說明

repeat:<number> | auto-fill | auto-fit

number:列的寬度或行的高度，可以為fr,px,%，max-content,min-content,auto等

auto-fill:以網(wǎng)格項(xiàng)為準(zhǔn)自動填充，即當(dāng)寬度夠時，自動在列上填充空的單元格。

auto-fit:以網(wǎng)格容器為準(zhǔn)自動填充。

注意

1，auto-fill和auto-fit必須結(jié)合minmax()使用才生效，具體數(shù)值是無效的。

? ? 例：repeat(auto-fill,minmax(100px,300px));

2，只適用于grid-template-columns和grid-template-rows

repeat的混合寫法

grid-auto-columns/grid-auto-rows

--指定自動生成的網(wǎng)絡(luò)軌道（又名隱式網(wǎng)絡(luò)軌道）的大小，即當(dāng)我們創(chuàng)建的行或列不夠時，自動填充行或列的即是隱式網(wǎng)絡(luò)軌道。

grid-auto-flow

--控制自動布局算法的工作方式

語法

grid-auto-flow:row | column | row dense | column dense;?

(不建議使用，因?yàn)椴缓每刂?

1,justify-content

--設(shè)置網(wǎng)格容器內(nèi)的所有網(wǎng)格沿著行軸的對齊方式

語法

justify-content: start |end |center | stretch |space-around | space-between | space-evenly;

2，align-content

--設(shè)置網(wǎng)格容器內(nèi)所有網(wǎng)格在列軸上的對齊方式

語法

align-content: start | end | stretch | space-around（單元格與單元格之間的間隙是兩端間隙的兩倍） | space-between | space-evenly(兩端的間隙和單元格與單元格之間的間隙一樣)

簡寫

3，place-content

語法

place-content:<align-content> <justify-content>;

??

1,justify-items

--沿著行軸對齊網(wǎng)格內(nèi)的內(nèi)容

語法

justify-items: start | end | center | stretch(默認(rèn)值);

2,align-items

--沿著列軸對齊網(wǎng)格內(nèi)的內(nèi)容

語法

align-items:start | end | center | stretch(默認(rèn)值);

3,place-items

語法

place-items:<align-items> <justify-items>;

grid-column-gap/grid-row-gap

--指定網(wǎng)格線的大小，可以想象為設(shè)置列/行之間的寬度。

簡寫

grid-gap: <grid-row-gap>? <grid-column-gap?>;不過逐漸可以使用gap簡寫來替代grid-gap，如果兼容IE，最好兩個都寫上。

grid-template簡寫例子

repeat() 只能用在已有的元素上

grid-template簡寫屬性

屬性值

1:<none>將三個屬性都設(shè)置為其初始值

2:<subgrid >把grid-template-rows和grid-template-columns設(shè)置為subgrid，并且grid-template-areas設(shè)置為初始值（即一個單元格的大?。?/p>

3:<grid-template-rows/grid-template-columns>把grid-template-rows和grid-template-columns設(shè)置為指定值，于此同時，設(shè)置grid-template-areas為none