ປະກອບສັບ CSS place-self

ການກໍານົດ ແລະ ການນໍາໃຊ້

place-self ຄູ່ມູນສຳລັບການປະສົມສິ່ງພິມພາບພາຍໃນສະບາຍອາກາດ ແມ່ນຄວາມຈຳນວນຂອງຄູ່ມູນພາຍໃນດັ່ງຕໍ່:

• align-self
• justify-self

ຖ້າຄູ່ມູນ place-self ມີຄູ່ມູນສອງ:

place-self: start center;

• ຄູ່ມູນ align-self ແມ່ນ 'start'
• ຄູ່ມູນ justify-self ແມ່ນ 'center'

ຖ້າຄູ່ມູນ place-self ມີພຽງຄູ່ມູນໜຶ່ງ:

place-self: end;

• ຄູ່ມູນ align-self ແລະ justify-self ແມ່ນ 'end'

ຄວາມຈຳນວນ

ຕົວຢ່າງ 1

ກຳນົດການປະສົມກັນບັນດາສິ່ງພິມພາບພາຍໃນທາງທີ່ສາຍທີ່ຂອງການຍ້າຍຂອງສະບາຍອາກາດ ແລະທາງທີ່ສາຍທີ່ຢູ່ທາງກາງ:

#myDiv {
  place-self: end;
}

亲自试一试

ຕົວຢ່າງ 2: ຮູບແບບຂຽນ

ເມື່ອ <div> element 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;

ຄູ່ມືຂອງລັກສະນະນະໂຍບາຍ

ລາຍລະອຽດດ້ານເຕັກນິກ

ການສະໜັບສະໜູນບັນພິມ

ຈຳນວນໃນຕາລະບັນດາບັນພິມອະນຸຍາດຂອງບັນດາບັນພິມທີ່ສະໜັບສະໜູນບັນດາລັກສະນະນະໂຍບາຍນີ້.

ບັນດາໜ້າທີ່

ການສອນCSS Grid Layout

ການສອນCSS Flexbox Layout

ກ່ຽວກັບການປະຕິບັດບາງ align-self CSS

ກ່ຽວກັບປະເພດ CSS justify-self

ກ່ຽວກັບປະກອບຂໍ້ຄວາມ CSS writing-mode