Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Grid Layoutissa (ruudukkoasettelu) ja Flexboxissa (joustava laatikkoasettelu),gap on lyhennetty ominaisuus, joka määrittää sekä rivivälin (kouru) että sarakevälin (kutsutaan Flexboxissa usein "poikkiakseliväliksi") koon.Tämä ominaisuus yksinkertaistaa huomattavasti edellistä tarvetta asettaa se erikseenrow-gap(tai grid-row-gap vanhassa CSS Gridissä) jacolumn-gap(tai grid-column-gap) hankala prosessi.

Käytetään Grid Layoutissa

CSS Grid Layoutissa,gap Ominaisuudet voivat määrittää ruudukon rivien ja ruudukon sarakkeiden välisten rakojen koon samanaikaisesti.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三个等宽的列 */
  gap: 20px; /* 同时设置行和列间隙为20px */
  /* 或者更具体地 */
  /* gap: 20px 30px; /* 第一个值设置行间隙，第二个值设置列间隙 */
}
1
2
3
4
5
6
7

Käytetty Flexboxissa

Flexboxissa,gap Ominaisuutta käytetään joustokohteiden välisen raon asettamiseen, tämä sisältää pääakselin ja poikkiakselin välin (vaikka Flexboxissa poikkiakselivälin käsite ei ehkä ole yhtä intuitiivinen kuin Gridissä, koska se vaikuttaa pääasiassa monilinjaiset joustavat säiliöt).

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 允许flex项换行 */
  gap: 10px; /* 同时设置主轴和交叉轴上的间隙为10px */
  /* 或者更具体地 */
  /* row-gap: 10px; /* 仅在需要时设置行间隙 */
  /* column-gap: 15px; /* 仅在需要时设置列间隙（或交叉轴间隙），但这在Flexbox中通常不太常见 */
}
1
2
3
4
5
6
7
8

Huomaa,gap Attribuutin arvo voi olla pituus (esim.px、em、vw jne.), prosenttiosuus tai jokin muurow-gapjacolumn-gap Hyväksytyt lailliset arvot.Lisäksi, jos tarvitsetrow-gapjacolumn-gapJos haluat asettaa eri arvoja, voit välittää nämä kaksi arvoa muodossagapOminaisuus annetaan kahdella argumentilla, ensimmäinen arvo vastaa riviväliä ja toinen arvo vastaa sarakeväliä (ruudukossa) tai poikkiakseliväliä (Flexboxissa, vaikka tämä on harvinaisempaa).

On syytä huomata, että vaikkagapOminaisuuksia tuetaan laajasti uusimmissa selainversioissa, mutta CSS tulee silti kirjoittaa taaksepäin yhteensopivuus mielessä ja sitä voidaan vaatia käyttämään-webkit-etuliite (joissakin vanhemmissa selaimissa) tai anna varaosan.