ປະເພດ CSS justify-items

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ການຕັດຕາວິງ justify-items ແມ່ນຖືກຕັດຕາວິງໃສ່ສະຖານຂອງການຈັດວິງທີ່ສາຍສັ້ນມາທີ່ຊາຍສັ້ນ, ເພື່ອຫຼອດການຕັດຕາວິງຂອງການຈັດວິງທີ່ສາຍສັ້ນມາທີ່ຊາຍສັ້ນ:

ສຳລັບຂະແໜງບັນດາວິທະຍາສານອັງກິດ, ການກະຈາຍຢູ່ບັນຊີວະທີ່ສາຍສັ້ນມາທີ່ຊາຍສັ້ນ, ທີ່ລົງມາທີ່ຊາຍສັ້ນ:

ສຳລັບການໃຫ້ມີຜົນການຕັດຕາວິງຂອງການຕັດຕາວິງນັ້ນ, ການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ຊາຍສັ້ນຕ້ອງຖືກປະກອບບາງບານຊ່ອງທີ່ມີທີ່ຈະອອກຢູ່ບໍລິເວນທີ່ຊາຍສັ້ນຂອງມັນ:

ຄຳເຕືອນ:ສຳລັບການຕັດຕາວິງການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ບັນຊີວະທີ່ລົງ ທີ່ບໍ່ແມ່ນທີ່ສາຍສັ້ນມາທີ່ຊາຍສັ້ນ, ຂ້ອຍຕ້ອງການປະກອບບາງບານຊ່ອງທີ່ມີທີ່ຈະອອກຢູ່ບໍລິເວນຂອງມັນ: ການຕັດຕາວິງ align-items ການຕັດຕາວິງ ປະສົມປະສານ

ບໍ່ດັ່ງນັ້ນ ການກ່າວຫາ:

CSS ການສອນ:CSS Grid

CSS ການສອນ:CSS ການຈັດວິງ

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ align-items

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ direction

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ grid

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ grid-template-columns

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ justify-self

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ position

ຄູ່ມວນຊົນ CSS:ການຕັດຕາວິງ writing-mode

ບົດສະຫຼຸບ

ຕົວຢ່າງ 1

ການຕັດຕາວິງການຕັດຕາວິງຂອງການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ສຸດທີ່ຂອງການຕັດຕາວິງທີ່ສາຍສັ້ນ:

#container {
  display: grid;
  justify-items: end;
}

亲自试一试

ຕົວຢ່າງ 2: ການຕັດຕາວິງ justify-items ຕ້ານ justify-self

ການຕັດຕາວິງຕໍ່ສະຖານຂອງການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ຊ້າຍ. ການຕັດຕາວິງຂອງສະຖານຂອງການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ຊ້າຍ ທີ່ 'right' ສາມາດຍອດການຕັດຕາວິງຄັດຄ້ານ:

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

亲自试一试

ຕົວຢ່າງ 3: ການຕັດຕາວິງ justify-items ຕະຫຼອດການຈັດວິງທີ່ອາດຕັດຕາວິງທີ່ສາຍສັ້ນ:

ການຕັດຕາວິງສະຖານຂອງການຈັດວິງຂອງການຕັດຕາວິງທີ່ອາດມີການຕັດຕາວິງທີ່ສາຍສັ້ນມາທີ່ຊ້າຍ:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}
.blue {
  position: absolute;
}

亲自试一试

ຕົວຢ່າງ 4: writing-mode

ເມື່ອວັດຖຸສະຖານຂອງການກະຈາຍມືອກາຍມັນສະຖານະຂອງ writing-mode ແມ່ນ vertical-rl ການກະຈາຍອອກຢູ່ບັນຊີວະທີ່ລົງ. ຜົນຄວາມຈະຖືກຍ້າຍຈາກຊ້າຍທີ່ຊາຍສັ້ນໄປທີ່ສູງທີ່ຫຼັງຈາກຈາກຊ້າຍທີ່ຊາຍສັ້ນໄປທີ່ລຸ່ມ:

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

亲自试一试

例子 5：direction

网格容器元素的 direction 属性值设置为“rtl”时，行内方向是从右到左。结果是容器的起点从左侧移到右侧，容器的末端从右侧移到左侧：

#container {
  justify-items: start;
  direction: rtl;
}

亲自试一试

CSS 语法

justify-items: legacy|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

属性值

值 描述
legacy

默认值。

仅在以'legacy'开头时，justify-self 值为'auto'的网格项继承网格容器的 justify-items 属性值。

它的存在是为了实现 HTML 的 <center> 元素和 align 属性的遗留对齐行为。
normal 取决于布局上下文，但类似于网格布局的 'stretch'。
stretch 如果未设置 inline-size（宽度），则拉伸以填充网格单元格。
start 在行内方向开头对齐项目。
left 将项目左对齐。
center 将项目对齐到中心。
end 在行内方向的末尾对齐项目。
right 将项目右对齐。
overflow-alignment
  • 'safe' 会将项目的对齐方式设置为 'start'，如果内容溢出。
  • 'unsafe' 保持对齐值，无论项目内容是否溢出。
baseline-alignment 元素与父元素的基线对齐。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

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

浏览器支持

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

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0