Style justifyContent

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

ຖ້າບັນດາສັນຍາວາງບໍ່ໃຊ້ທັງໝົດຂອງອາກາດທີ່ມີຢູ່ທີ່ທາງສະຖານທີ່ທາງສະໝີ (ທີ່ຕໍ່າ)ໃຫ້ບໍ່ມີການກະທົບ. justifyContent ຜົນກະທົບບັນດາສັນຍາວາງໃນບັນດາສັນຍາວາງທີ່ສະໜາມສະໜູນ.

ຂໍ້ສັງເກດ:ຂໍ້ສັງເກດ: alignContent ຜົນກະທົບບັນດາສັນຍາວາງໃນຕາມທາງສະຖານທີ່ທີ່ຕາມທາງທາງສະໝີ (ທີ່ຕໍ່າ).

ບໍ່ຊອກຫາອີກ:

CSS ອຸປະກອນການອ່າວ:ຜົນກະທົບ justify-content

ຄວາມສະແດງ

ຈະປ່ອຍທາງສະຖານທີ່ສັນຍາວາງໃນບັນດາສັນຍາວາງຂອງ <div> ທີ່ມີຄວາມສະຫຼາດ:

document.getElementById("main").style.justifyContent = "space-between";

ທ້າທາຍຕົວເອງ

ສັນຍາວາງ

ການການສະແດງ justifyContent:

object.style.justifyContent

ການຕັດສິນພາສາ justifyContent:

object.style.justifyContent = "flex-start|flex-end|center|space-between|space-around|initial|inherit"

ຄູ່ມັດເດີມຂອງຜົນກະທົບ

ຄູ່ມັດເດີມ ການອະທິບາຍ
flex-start ຄູ່ມັດເດີມ. ບັນດາສັນຍາວາງຕັ້ງຢູ່ຫຼັງທີ່ຂອງບັນດາ.
flex-end ບັນດາສັນຍາວາງຕັ້ງຢູ່ທີ່ສຸດທີ່ຂອງບັນດາ.
center ບັນດາສັນຍາວາງຕັ້ງຢູ່ກາງບັນດາບັນດາ.
space-between ຈະປ່ອຍທາງສະຖານທີ່ສັນຍາວາງໃນບໍລິສັດ.
space-around ຈະປ່ອຍທາງສະຖານທີ່ສະໜາມສັນຍາວາງກ່ອນ, ບໍລິສັດ, ແລະຫຼັງ.
initial ຕັດສິນພາສາຜົນກະທົບນີ້ເປັນຄູ່ມັດເດີມ. ບັນທຶກ initial.
inherit ຍຶດຄວາມມີຜົນກະທົບນີ້ຈາກປະຈຳເປັນຜູ້ປົກຄອງ. ບັນທຶກ inherit.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄູ່ມັດເດີມ: flex-start
ຜົນກະທົບ: ຄຳເວົ້າເປັນກົມຕາມທີ່ສະແດງວ່າ ຜົນກະທົບ justify-content.
CSS ລະບົບສະບັນຍາ: CSS3

ການສະໜັບສະໜູນບັນດາຄົນບານ

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
ສະໜັບສະໜູນ 12.0 ສະໜັບສະໜູນ 9.0 ສະໜັບສະໜູນ

ບັນດາໜ້າທີ່ກ່ຽວຂ້ອງ

HTML DOM STYLE ອຸປະກອນການອ່າວຜົນກະທົບ alignContent

HTML DOM STYLE ອຸປະກອນການອ່າວຜົນກະທົບ alignItems

HTML DOM STYLE ອຸປະກອນການອ່າວalignSelf 属性