place-content özelliği

place-content özelliği, flex öğeleri için ana ve çapraz eksenlerde, grid'ler için ise yatay ve dikey eksenlerde öğelerin hizalanmasını belirler. İlk değer ana (yatay) eksendeki hizalamayı, ikinci değer ise çapraz (dikey) eksendeki hizalamayı belirtir. Bu özellik ebeveyn öğeye uygulanır.

Sözdizimi

cssseçici {
  place-content: ana_eksen çapraz_eksen;
}

Örnek . Ana eksenin başında ve çapraz eksenin merkezinde hizalama

Şu anda öğeler ana eksenin üst kısmına dayalı ve aynı zamanda çapraz eksenin merkezinde konumlanmış durumda:

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

Результат:

Örnek . Ana eksenin merkezinde ve çapraz eksenin sonunda hizalama

Şimdi ise öğeler ana eksenin merkezinde ve çapraz eksenin sonunda konumlanmış durumda:

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

Результат:

Örnek . Ana eksenin sonunda ve çapraz eksenin başında hizalama

Burada öğeler ana eksenin alt kısmına ve aynı zamanda çapraz eksenin başlangıcına dayalı:

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

Результат:

Örnek . Grid'de dikey eksenin başında ve yatay eksenin sonunda hizalama

Öğelerimizi dikey eksenin başlangıcında ve yatay eksenin sonunda hizalayalım:

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

Результат:

Örnek . Grid'de dikey eksenin merkezinde ve yatay eksenin başında hizalama

Öğelerimizi dikey eksenin merkezinde ve yatay eksenin başlangıcında hizalayalım:

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

Результат:

Örnek . Grid'de dikey eksenin sonunda ve yatay eksenin başında hizalama

Öğelerimizi dikey eksenin sonunda ve yatay eksenin başlangıcında hizalayalım:

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

Результат:

Ayrıca bakınız