Eienskap justify-items

Die eienskap justify-items stel die horisontale belyning van elemente binne 'n rooster se selle. Die belyning is die duidelikste wanneer jy die rooster in die blaaier se ontfoutings hulpmiddel besigtig. Word op die ouer element toegepas.

Sintaksis

cssselekteerder {
  justify-items: flex-start | flex-end | center ;
}

Waardes

Voorbeeld . Belyning teen die begin van die horisontale as

Kom ons belyn ons elemente binne die selle teen die begin van die horisontale as:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  height: 200px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

En nou kyk ons na ons rooster in die ontfoutings hulpmiddel:

Voorbeeld . Belyning in die middel van die horisontale as

Kom ons belyn ons elemente in die selle in die middel van die horisontale as:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Deur die blaaier se ontfoutings hulpmiddel aan te sluit, sal ons ons rooster sien:

Voorbeeld . Belyning teen die einde van die horisontale as

Kom ons belyn ons elemente teen die einde van die horisontale as:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Nou kyk ons na die rooster deur die ontfoutings hulpmiddel:

Sien ook