Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

place-self


Misol

Alohida grid elementini blok va inline yo‘nalishlarida oxiriga tekislang:

#myDiv {   place-self: end; }
O‘zingiz sinab ko‘ring »

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

ULASHISH

Ta’rif va qo‘llanilishi

place-self xususiyati alohida grid elementlarini tekislash uchun ishlatiladi hamda quyidagi xususiyatlar uchun qisqartma xususiyat hisoblanadi:

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

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

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

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

Demoni ko‘rsatish ❯

Standart qiymat: auto
Meros qilinadi: yo‘q
Animatsiya qilinadi: yo‘q. animatable haqida o‘qing
Versiya: CSS3
JavaScript sintaksisi: object.style.placeSelf="end stretch" Sinab ko‘ring

Brauzerlarda qo‘llab-quvvatlash

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

Xususiyat
place-self 59.0 79.0 45.0 11.0 46.0

CSS sintaksisi

place-self: auto|value|initial|inherit;

Xususiyat qiymatlari

Qiymat Tavsif Demo
auto Standart. Elementning standart place-self qiymati. Demo ❯
normal Maket kontekstiga bog‘liq, lekin o‘lchami o‘rnatilmagan grid elementlari uchun grid maketida 'stretch' ga o‘xshaydi. Agar o‘lcham o‘rnatilgan bo‘lsa, xususiyat qiymati 'start' kabi ishlaydi. Demo ❯
stretch Agar o‘lcham o‘rnatilmagan bo‘lsa, grid katagini to‘ldiradigan qilib cho‘ziladi. Demo ❯
start Elementlarni inline va blok yo‘nalishlarida boshiga tekislaydi Demo ❯
left justify-self xususiyati qiymati sifatida elementlarni inline yo‘nalishida chapga tekislaydi. Demo ❯
center Elementlarni markazga tekislaydi Demo ❯
end Elementlarni inline va blok yo‘nalishlarida oxiriga tekislaydi Demo ❯
right justify-self xususiyati qiymati sifatida elementlarni inline yo‘nalishida o‘ngga tekislaydi. 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
tayanch chiziq bo‘yicha tekislash Element ota elementning tayanch chizig‘i (baseline) bo‘yicha tekislanadi. Demo ❯
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

Writing-mode

<div> elementining writing-mode xususiyati qiymati 'vertical-rl' ga o‘rnatilganda, grid katagining blok yo‘nalishidagi oxiri pastdan chapga, inline yo‘nalishidagi oxiri esa o‘ngdan pastga ko‘chadi:

#contianer {   display: grid;   writing-mode: vertical-rl; } #myDiv {   place-self: end; }
O‘zingiz sinab ko‘ring »

Flexbox

place-self xususiyatini flexbox elementlari uchun ham ishlatish mumkin, biroq justify-self uchun ikkinchi qiymat e’tiborga olinmaydi, chunki u flexbox’da qo‘llanilmaydi:

#contianer {   display: flex; } #myDiv {   place-self: end stretch; }
O‘zingiz sinab ko‘ring »

Tegishli sahifalar

CSS darsligi: CSS grid

CSS darsligi: CSS flexbox

CSS align-self xususiyati: CSS align-self xususiyati

CSS justify-self xususiyati: CSS justify-self xususiyati

CSS writing-mode xususiyati: CSS Writing-mode xususiyati


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish