Eienskap place-content

Die eienskap place-content spesifiseer die belyning van elemente volgens die hoof- en dwarsasse vir fleks elemente, en volgens die horisontale en vertikale asse vir roosters. Die eerste waarde spesifiseer belyning volgens die hoof (horisontale) as, die tweede waarde - volgens die dwars (vertikale) as. Die eienskap word toegepas op die ouer element.

Sintaksis

cssselektor {
  place-content: hoof_as dwars_as;
}

Voorbeeld . Belyning volgens die begin van die hoofas en die middel van die dwarsas

Tans word elemente teen die boonste deel van die hoofas gedruk en is terselfdertyd in die middel van die dwarsas:

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

css#parent {
  display: flex;
  place-content: start center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Voorbeeld . Belyning volgens die middel van die hoofas en die einde van die dwarsas

En nou is elemente in die middel van die hoofas geplaas en aan die einde van die dwarsas:

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

css#parent {
  display: flex;
  place-content: center end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Voorbeeld . Belyning volgens die einde van die hoofas en die begin van die dwarsas

Hier word elemente teen die onderste deel van die hoofas gedruk en terselfdertyd teen die begin van die dwarsas:

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

css#parent {
  display: flex;
  place-content: end start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Voorbeeld . Belyning volgens die begin van die vertikale as en die einde van die horisontale as in 'n rooster

Kom ons belyn ons elemente volgens die begin van die vertikale as en die einde van die horisontale as:

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

css#parent {
  display: grid;
  place-content: start end;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Voorbeeld . Belyning volgens die middel van die vertikale as en die begin van die horisontale as in 'n rooster

Kom ons belyn ons elemente volgens die middel van die vertikale as en die begin van die horisontale as:

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

css#parent {
  display: grid;
  place-content: center start;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Voorbeeld . Belyning volgens die einde van die vertikale as en die begin van die horisontale as in 'n rooster

Kom ons belyn ons elemente volgens die einde van die vertikale as en die begin van die horisontale as:

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

css#parent {
  display: grid;
  place-content: end start;
  grid-template-columns: 100px 100px;
  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;
}

Результат:

Sien ook