Lastnost place-content

Lastnost place-content določa poravnavo elementov vzdolž glavne in prečne osi za fleksibilne elemente ter vzdolž vodoravne in navpične osi za mrežne postavitve (grid). Prva vrednost določa poravnavo vzdolž glavne (vodoravne) osi, druga vrednost pa prečne (navpične) osi. Lastnost se uporablja za nadrejeni element.

Sintaksa

cssselektor {
  place-content: glavna_os prečna_os;
}

Primer . Poravnava na začetek glavne in sredino prečne osi

Trenutno so elementi poravnani na začetek glavne osi in hkrati na sredino prečne osi:

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;
}

Результат:

Primer . Poravnava na sredino glavne in konec prečne osi

Zdaj so elementi poravnani na sredino glavne osi in na konec prečne osi:

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;
}

Результат:

Primer . Poravnava na konec glavne in začetek prečne osi

Tukaj so elementi poravnani na konec glavne osi in hkrati na začetek prečne osi:

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;
}

Результат:

Primer . Poravnava na začetek navpične in konec vodoravne osi v mreži

Poravnajmo elemente na začetek navpične in konec vodoravne osi:

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;
}

Результат:

Primer . Poravnava na sredino navpične in začetek vodoravne osi v mreži

Poravnajmo elemente na sredino navpične in začetek vodoravne osi:

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;
}

Результат:

Primer . Poravnava na konec navpične in začetek vodoravne osi v mreži

Poravnajmo elemente na konec navpične in začetek vodoravne osi:

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;
}

Результат:

Glejte tudi