Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

place-content


Misol

Flex qatorlarini flex konteynerining pastki qismiga tekislang va flex elementlarini gorizontal bo‘yicha oralarida bir xil masofa qoldirib joylashtiring:

#container {   display: flex;   place-content: end space-between; }
O‘zingiz sinab ko‘ring »

Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.

ULASHISH

Ta’rif va qo‘llanilishi

place-content xususiyati flexbox va grid maketlarida ishlatiladi hamda quyidagi xususiyatlar uchun qisqartma xususiyat hisoblanadi:

Agar place-content xususiyati ikkita qiymatga ega bo‘lsa:

  • place-content: start center;
    • align-content xususiyatining qiymati 'start'
    • justify-content xususiyatining qiymati 'center'

Agar place-content xususiyati bitta qiymatga ega bo‘lsa:

  • place-content: end;
    • align-content va justify-content xususiyatlarining qiymati ikkalasida ham 'end'

Demoni ko‘rsatish ❯

Standart qiymat: normal
Meros qilinadi: yo‘q
Animatsiya qilinadi: yo‘q. animatable haqida o‘qing
Versiya: CSS3
JavaScript sintaksisi: object.style.placeContent="end space-around" Sinab ko‘ring

Brauzerlarda qo‘llab-quvvatlash

Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.

Xususiyat
place-content 59.0 79.0 53.0 11.0 46.0

CSS sintaksisi

place-content: normal|value|initial|inherit;

Xususiyat qiymatlari

Qiymat Tavsif Demo
normal Standart qiymat. Maket kontekstiga bog‘liq. align-content va justify-content uchun hech qanday xususiyat qiymati o‘rnatmaslik bilan bir xil. Demo ❯
stretch Grid: agar o‘lcham o‘rnatilmagan bo‘lsa, grid elementlarini grid konteynerini to‘ldiradigan qilib cho‘zadi.
Flexbox: agar flex elementlarining ko‘ndalang o‘qdagi o‘lchami ko‘rsatilmagan bo‘lsa, ularni flex konteynerini to‘ldiradigan qilib ko‘ndalang o‘q bo‘ylab cho‘zadi.		 Demo ❯
start Elementlarni konteynerning boshiga tekislaydi Demo ❯
end Elementlarni konteynerning oxiriga tekislaydi Demo ❯
center Elementlarni konteynerning markaziga tekislaydi Demo ❯
space-between Mavjud qo‘shimcha bo‘sh joyni konteyner ichidagi elementlar orasida ikkala o‘q bo‘yicha teng taqsimlaydi. Demo ❯
space-around Mavjud qo‘shimcha bo‘sh joyni konteyner ichidagi har bir element atrofida ikkala o‘q bo‘yicha teng taqsimlaydi. Demo ❯
space-evenly Konteyner ichidagi elementlarni ikkala o‘q bo‘yicha teng taqsimlaydi. Demo ❯
overflow-alignment
  • Agar kontent toshib chiqsa, 'safe' element tekislanishini 'start' ga o‘rnatadi
  • 'unsafe' element kontenti toshib chiqishi yoki chiqmasligidan qat’i nazar tekislash qiymatini saqlab qoladi
initial Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing
inherit Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing

Ko‘proq misollar

Grid bilan misol

Blok yo‘nalishidagi mavjud qo‘shimcha bo‘sh joy har bir grid elementi atrofida teng taqsimlanadi, grid elementlari esa inline yo‘nalishida markazga tekislanadi:

#container {   display: grid;   place-content: space-around center; }
O‘zingiz sinab ko‘ring »

Tegishli sahifalar

CSS darsligi: CSS flexbox

CSS darsligi: CSS grid

CSS ma’lumotnomasi: align-content xususiyati

CSS ma’lumotnomasi: justify-content xususiyati

HTML DOM ma’lumotnomasi: alignContent xususiyati


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish