ປະສົມທີ່ CSS

定义和用法

align-content 属性修改 flex-wrap 属性的行为。它与 align-items 相似，但是它不对齐弹性项目，而是对齐弹性线。

ຄຳເຕືອນ:ຈະຕ້ອງມີບັນດາອົງກອນທີ່ມີຫລາຍສາຍກະຈັດຈະມີການຈຳນວນ.

ຄຳເຕືອນ:ການຈຳນວນ justify-content ການຈຳນວນບັນດາອົງກອນໃນວົງຫລັງສະໜາມບັນດາອົງກອນ.

ການສອນ CSSCSS Flexbox

ການສອນ CSSCSS Grid

ຈະມີສາຍກະຈັດຕາມກັນທີ່ຈະຕິດຕາມບ່ອນສຸດທີ່ຫລັງສະຫລົມ.

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

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

ມູນຄ່າສົມທົບ:	stretch
ການຖືກສ້າງມາ:	ບໍ່
ການສ້າງອາກາດ:	ບໍ່ສະໜັບສະໜູນ。ບໍ່ໄດ້ບອກວ່າ:ການສ້າງອາກາດ.
ສະຖານະການ:	CSS3
ການຄຳສັບຂອງ JavaScript:	object.style.alignContent="center"

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

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