ປະເພດ place-items CSS

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

place-items ປະສົງຂອງຄວາມໃຊ້ງໃສ່ການຈັດວາງມີຈຸດປະສົງສະເພາະກັບການຈັດວາງທີ່ສະເພາະກັບການຈັດວາງທີ່ຖືກກົດຫມາຍຢູ່ດາວ:

ຖ້າປະສົງ place-items ມີສອງຄຳຕັດສິນກັນ:

place-items: start center;
  • ຄຳຕັດສິນຂອງປະສົງ align-items ແມ່ນ 'start':
  • ຄຳຕັດສິນຂອງປະສົງ justify-items ແມ່ນ 'center':

ຖ້າປະສົງ place-items ມີພຽງຄຳຕັດສິນດຽວກັນ:

place-items: end;
  • 则 align-items 和 justify-items 属性的值均为 'end'

实例

例子 1

将每个

元素在其网格单元格的行内方向和块方向上都放置在开始位置：

#container {
  place-items: start;
}

ທົດລອງດັ່ງທີ່ເຈົ້າຈະຕ້ອງການ

例子 2：书写模式

当网格容器的 writing-mode 属性值设置为 'vertical-rl' 时，块方向的结束位置从底部移动到左侧，行内方向的结束位置从右侧移动到底部：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

ທົດລອງດັ່ງທີ່ເຈົ້າຈະຕ້ອງການ

ຕົວຢ່າງ 3: ການຈັດການກະຈຳຂອງບັນດາກະຈຳກັບການຈັດການບັນດາກະຈຳກັບການຈັດການຂອງບັນດາກະຈຳ.

justify-items ລັກສະນະບໍ່ສະໜັບສະໜູນກັບການຈັດການຂອງບັນດາກະຈຳກັບການຈັດການຂອງບັນດາກະຈຳກັບການຈັດການຂອງບັນດາກະຈຳ. place-items ລັກສະນະ,justify-items ຄູ່ມືສົມບູນຈະຖືກທຳລາຍ.

#wrapper {
  place-items: stretch end;
}

ທົດລອງດັ່ງທີ່ເຈົ້າຈະຕ້ອງການ

ສັບພາສາ CSS:

place-items: normal legacy|value|initial|inherit;

ຄູ່ມືສົມບູນຂອງລັກສະນະ

ຄູ່ມືສົມບູນ ການອະທິບາຍ
normal legacy

ຄູ່ມືສົມບູນ. ຄູ່ມືplace-itemsຂອງບັນດາສັດຕະວັດ.

ຄູ່ມືສົມບູນຈະແມ່ນ 'normal', ຄູ່ມືjustify-itemsຈະແມ່ນ 'legacy'.
baseline ບັນດາອີກອັນສະນະຈະຕັ້ງຢູ່ພາກລະບາຍພື້ນທີ່ພາຍໃຕ້ກະຈຳ.
center ຈະຕັດຕັ້ງບັນດາອີກອັນສະນະເພື່ອກະຈຳໃສ່ຂອງກະຈຳຂອງກະຈຳຂອງກະຈຳ.
end ຈະຕັດຕັ້ງບັນດາອີກອັນສະນະເພື່ອກະຈຳໃສ່ຂອງກະຈຳຂອງກະຈຳຂອງກະຈຳຂອງກະຈຳ.
start ຈະຕັດຕັ້ງບັນດາອີກອັນສະນະເພື່ອກະຈຳໃສ່ຂອງກະຈຳຂອງກະຈຳຂອງກະຈຳ.
stretch ຖ້າບໍ່ມີການຕັດຕັ້ງຂະໜາດຂອງບັນດາອີກອັນສະນະທີ່ກະຈຳ, ຈະຂະຫຍາຍບັນດາອີກອັນສະນະທີ່ກະຈຳເພື່ອກະຈຳກັບກະຈຳຂອງກະຈຳກັບການຂະຫຍາຍ.
initial ຈະຕັດຕັ້ງລັກສະນະນັ້ນໃຫ້ເປັນຄູ່ມືສົມບູນ. ເບິ່ງ: initial.
inherit ຈະຍືກຂຶ້ນຈາກປະຈຳປະກອບປະກອບຂອງພາຍໃນ. ເບິ່ງ: inherit.

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

ຄູ່ມືສົມບູນ: normal legacy
ການຖືກສ້າງຕົວເລືອກ: ບໍ່
ການສ້າງອິດສະຫຼະການ ບໍ່ສະໜັບສະໜູນ. ບັນດາບົດຢ່າງ:ລັກສະນະວິທະຍາສາກົນ.
ສະຖານະ: CSS3
ສັບພາສາ JavaScript: object.style.placeItems="stretch center"

ການສະໜັບສະໜູນບັນດາບັນນາທິການ

ຈຳນວນໃນຕາຕະລາງສະແດງວ່າສະບາຍການສະແດງຂອງບັນດາບັນນາທິການທີ່ເປັນບັນດາບັນນາທິການທຳອິດທີ່ສະແດງຄວາມສະໜັບສະໜູນບັນດາລັກສະນະນັ້ນ.

Chrome Edge Firefox Safari Opera
59.0 79.0 45.0 11.0 46.0

ບັນດາໜ້າທີ່

ຄູຫັດCSS 网格布局

ຄູຫັດCSS 弹性盒布局

ກ່ຽວກັບຄູ່ມືການຄັດຄວາມຄວາມ

ກ່ຽວກັບລະບົບ CSS justify-items

ກ່ຽວກັບປະສົມປະຫວັດການ writing-mode