Xüsusiyyət place-content

place-content xüsusiyyəti flex elementlər üçün əsas və çarpaz oxlar, qridlər üçün isə üfüqi və şaquli oxlar üzrə elementlərin düzülməsini təyin edir. Birinci dəyər əsas (üfüqi) ox, ikinci dəyər isə çarpaz (şaquli) ox üzrə düzülməni göstərir. Xüsusiyyət ana elementə tətbiq edilir.

Sintaksis

cssselektor {
  place-content: esas_ox capraz_ox;
}

Nümunə . Əsas oxun əvvəlinə və çarpaz oxun mərkəzinə düzülmə

Hal-hazırda elementlər əsas oxun yuxarı hissəsinə sıxışdırılıb və eyni zamanda çarpaz oxun mərkəzində yerləşir:

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

Результат:

Nümunə . Əsas oxun mərkəzinə və çarpaz oxun sonuna düzülmə

İndi isə elementlər əsas oxun mərkəzində və çarpaz oxun sonunda yerləşir:

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

Результат:

Nümunə . Əsas oxun sonuna və çarpaz oxun əvvəlinə düzülmə

Burada elementlər əsas oxun aşağı hissəsinə sıxışdırılıb və eyni zamanda çarpaz oxun əvvəlinə sıxışdırılıb:

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

Результат:

Nümunə . Qriddə şaquli oxun əvvəlinə və üfüqi oxun sonuna düzülmə

Gəlin elementlərimizi şaquli oxun əvvəlinə və üfüqi oxun sonuna düzək:

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

Результат:

Nümunə . Qriddə şaquli oxun mərkəzinə və üfüqi oxun əvvəlinə düzülmə

Gəlin elementlərimizi şaquli oxun mərkəzinə və üfüqi oxun əvvəlinə düzək:

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

Результат:

Nümunə . Qriddə şaquli oxun sonuna və üfüqi oxun əvvəlinə düzülmə

Gəlin elementlərimizi şaquli oxun sonuna və üfüqi oxun əvvəlinə düzək:

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

Результат:

Həmçinin bax