Vlastnost place-content

Vlastnost place-content nastavuje zarovnání prvků podél hlavní a příčné osy pro flexboxové prvky, a podél vodorovné a svislé osy pro gridy. První hodnota určuje zarovnání podél hlavní (vodorovné) osy, druhá hodnota - příčné (svislé). Vlastnost se aplikuje na nadřazený prvek.

Syntaxe

cssselektor {
  place-content: hlavni_osa prična_osa;
}

Příklad . Zarovnání na začátek hlavní a střed příčné osy

Nyní jsou prvky přitlačeny k horní části hlavní osy a zároveň jsou ve středu příčné:

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

Результат:

Příklad . Zarovnání na střed hlavní a konec příčné osy

Nyní jsou prvky umístěny ve středu hlavní osy a na konci příčné:

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

Результат:

Příklad . Zarovnání na konec hlavní a začátek příčné osy

Zde jsou prvky přitlačeny k dolní části hlavní osy a zároveň na začátek příčné:

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

Результат:

Příklad . Zarovnání na začátek svislé a konec vodorovné osy v gridu

Zarovnejme naše prvky na začátek svislé a konec vodorovné osy:

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

Результат:

Příklad . Zarovnání na střed svislé a začátek vodorovné osy v gridu

Zarovnejme naše prvky na střed svislé a začátek vodorovné osy:

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

Результат:

Příklad . Zarovnání na konec svislé a začátek vodorovné osy v gridu

Zarovnejme naše prvky na konec svislé a začátek vodorovné osy:

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

Результат:

Viz také