CSS place-self ਪ੍ਰਤੀਯੋਗਿਤਾ

تعریف اور استعمال

place-self خاصیت ایک واحد گرید پروجیکٹ کو آلین کرنے کے لئے استعمال کی جاتی ہے، یہ درج ذیل خاصیتوں کا مختصر نمونہ ہے:

اگر place-self خاصیت کو دو مرتبہ لگایا گیا ہو:

place-self: start center;
  • align-self خاصیت کا مراد 'start' ہوگا
  • justify-self خاصیت کا مراد 'center' ہوگا

اگر place-self خاصیت کو ایک مرتبہ لگایا گیا ہو:

place-self: end;
  • تو align-self اور justify-self کی خاصیت کا مراد کچھ نہیں ہوگا

مثال

مثال 1

ایک واحد گرید پروجیکٹ بلاک ڈائریشن اور در بلاک ڈائریشن دونوں میں خاتماتی موقعیت تک آلین کریں:

#myDiv {
  place-self: end;
}

亲自试一试

مثال 2: لکھن کا طریقہ

جب <div> عناصر کا writing-mode 属性值设置为 'vertical-rl' ʁن کی وچ، گرید کلوینس در بلاک ڈائریشن کی خاتماتی موقعیت سے بٹن چپ تک موٹ جاتا ہے، در بلاک ڈائریشن کی خاتماتی موقعیت سے بٹن پائیدار تک موٹ جاتا ہے:

#contianer {
  display: grid;
  writing-mode: vertical-rl;
}
#myDiv {
  place-self: end;
}

亲自试一试

例子 3：弹性盒布局

place-self 属性也可以用于弹性盒布局项目，但 justify-self 的第二个值将被忽略，因为它在弹性盒布局中不适用：

#contianer {
  display: flex;
}
#myDiv {
  place-self: end stretch;
}

亲自试一试

CSS 语法

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

属性值

值 描述
auto 默认。元素的默认 place-self 值。
normal

取决于布局上下文，但对于未设置大小的网格项目，其行为类似于网格布局中的 'stretch'。

如果设置了大小，属性值的行为类似于 'start'。
stretch 如果未设置大小，则拉伸以填满网格单元格。
start 在行内方向和块方向上将项目对齐到开始位置。
left 在行内方向上将项目对齐到左侧，作为 justify-self 属性的值。
center 将项目对齐到中心。
end 在行内方向和块方向上将项目对齐到结束位置。
right 在行内方向上将项目对齐到右侧，作为 justify-self 属性的值。
overflow-alignment

'safe'：如果内容溢出，则将项目对齐设置为 'start'

'unsafe'：无论项目内容是否溢出，都保持对齐值
baseline alignment 元素与父元素的基线对齐。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： auto
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.placeSelf="end stretch"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
59.0 79.0 45.0 11.0 46.0

相关页面

ਸੂਚਨਾਃCSS ਗ੍ਰਿੱਡ ਲੇਆਊਟ

ਸੂਚਨਾਃCSS ਫਲੈਕਸੀਬਲ ਬੈਕਸ ਲੇਆਊਟ

ਸਲਾਹਦਾਰੀਃسی ایس ایس ایلائن سلف اٹری بیوٹ

ਸਲਾਹਦਾਰੀਃCSS جسٹی-سبلفر属性

ਸਲਾਹਦਾਰੀਃCSS writing-mode ਪ੍ਰਤੀਯੋਗਿਤਾ