Justify-content xususiyati

justify-content xususiyati flex-bloklar uchun asosiy o‘q bo‘yicha va gridlar uchun gorizontal o‘q bo‘yicha elementlarning joylashuvini belgilaydi. Ota elementga qo‘llaniladi.

Sintaksis

cssselektor {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Qiymatlar

Standart qiymat: flex-start.

Misol . Flex-start qiymati

Hozir o‘q chapdan o‘ngga yo‘nalgan (buni flex-direction: row amalga oshiradi), bloklar chap tomonga joylashgan:

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

css#parent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Flex-end qiymati

Ushbu misolda o‘q ham chapdan o‘ngga yo‘nalgan, lekin bloklar o‘ng tomonga joylashgan, chunki justify-content xususiyati flex-end qiymatiga ega:

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

css#parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Center qiymati

Hozir bloklar asosiy o‘qning yo‘nalishidan qat'iy nazar markazda joylashadi:

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

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Space-between qiymati

Bloklar asosiy o‘q bo‘ylab taqsimlangan, bunda birinchi element o‘qning boshiga, oxirgisi esa o‘qning oxiriga joylashgan:

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

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Space-around qiymati

Bloklar asosiy o‘q bo‘ylab taqsimlangan, bunda birinchi blok va o‘qning boshlanishi, oxirgi blok va o‘qning oxiri o‘rtasida boshqa bloklar o‘rtasidagi bilan bir xil interval mavjud. Biroq, intervallar yig‘iladi va ikkita blok o‘rtasidagi masofa blok va o‘qning boshi/oxiri o‘rtasidagidan ikki baravar ko‘p:

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

css#parent {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Center qiymati. O‘q pastga

Asosiy o‘qning yo‘nalishini flex-direction xususiyatini column qiymatiga o‘zgartirib o‘zgartiramiz:

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

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Space-between qiymati. O‘q pastga

Hozir bloklar vertikal bo‘ylab bir xil tarqaladi:

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

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

Misol . Gorizontal o‘qning boshiga joylashtirish (qatorlar) gridda

Keling, elementlarimizning gorizontal o‘qning boshiga joylashishini o‘rnatamiz:

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

css#parent {
  display: grid;
  justify-content: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}

Результат:

Misol . Gorizontal o‘qning markaziga joylashtirish gridda

Endi esa elementlarimizning gorizontal o‘qning markaziga joylashishini o‘rnatamiz:

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

css#parent {
  display: grid;
  justify-content: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}

Результат:

Misol . Gorizontal o‘qning oxiriga joylashtirish gridda

Keling, elementlarimizning gorizontal o‘qning oxiriga joylashishini o‘rnatamiz:

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

css#parent {
  display: grid;
  justify-content: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  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;
}

Результат:

Shuningdek qarang