ປະເພດ CSS flex

  • ກັບໄປບ່ອນຫຼັງ filter
  • ກັບໄປບ່ອນຕໍ່ໄປ flex-basis

ການສະເໜີ ແລະ ການນຳໃຊ້

flex ແມ່ນຄວາມກົບກັນຂອງບັນດາອັນດັບທີ່ຢູ່ໃນການແກ້ໄຂຂອງບັນດາອັນດັບທີ່ຢູ່ໃນການແກ້ໄຂ.

flex ແມ່ນຄວາມຍາວທີ່ສົມບູນຂອງບັນດາປະກອບທີ່ມີຄວາມສົມບູນ.

ຄວາມຄິດເຫັນ:ຖ້າບັນດາປະກອບບໍ່ແມ່ນບັນດາປະກອບທີ່ມີຄວາມສົມບູນ, ຂໍ້ສະເໜີ flex ບໍ່ມີຄວາມສົມບູນ.

ບໍ່ມີຄວາມລະອຽດ:

ຄູ່ມວນຊົນ: CSS 弹性框

ກ່າວແຈງ:ປະເພດ CSS flex-basis

ກ່າວແຈງ:ປະເພດ CSS flex-direction

ກ່າວແຈງ:ປະເພດ CSS flex-flow

ກ່າວແຈງ:ປະເພດ CSS flex-grow

ກ່າວແຈງ:ປະເພດ CSS flex-shrink

ກ່າວແຈງ:ປະເພດ CSS flex-wrap

ກ່າວແຈງ:HTML DOM flex 属性

ຫຼັກຖານ

ບໍ່ວ່າມີໃນເນື້ອຫຼັກໃດ, ດັງກັບຈຳນວນບ່ອນທີ່ສູງທັງໝົດຂອງອຸປະກອນຫຼັກ.

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

ທ້າທາຍສັນຍາການຕົວຕົນ

ສັບສິນຈີ CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

ຄູ່ມົນລະບຽບຂອງບັນດາປະສົມປະສານພາບ

ຄູ່ມົນລະບຽບ ການອະທິບາຍ
flex-grow ຈຳນວນ. ປະກອບການກວດສອບຈຳນວນທີ່ຄວນຂະຫຍາຍລົງຂອງອຸປະກອນທີ່ສົມທົບກັບອຸປະກອນທີ່ອື່ນໆ.
flex-shrink ຈຳນວນ. ປະກອບການກວດສອບຈຳນວນທີ່ຄວນຫຼຸດລົງຂອງອຸປະກອນທີ່ສົມທົບກັບອຸປະກອນທີ່ອື່ນໆ.
flex-basis

ຄວາມຍາວຂອງຂອງອຸປະກອນ.

ຄູ່ມົນລະບຽບທາງຄວາມຈິງ: "auto"、"inherit"，ຫຼືຈຳນວນທີ່ມີຄວາມຄາດຄະແນນ ສາມາດໃຊ້ "%"、"px"、"em" ຫຼືຫຼາຍຄວາມຈຳນວນອື່ນໆ.
auto ຕົງກັບ 1 1 auto.
initial ຕົງກັບ 0 0 auto. ໄດ້ກວດກາ: initial.
none ຕົງກັບ 0 0 auto.
inherit ຍິນຍອມຈາກປະກອບສັບສະດລາຊະນະທີ່ເປັນພາຍໃຕ້. ໄດ້ກວດກາ: inherit.

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

ຄູ່ມົນລະບຽບ: 0 1 auto
ຜົນລັບຖານ: ບໍ່
ສັນຍາການປະສານພາບ: ສະໜັບສະໜູນ. ບັນດາປະສົມປະສານພາບທີ່ພິຈາລະນາຫຼາຍຫຼາຍ.ປະສົມປະສານພາບການຫຼັງ.
ສະຖານະ: CSS3
ສັບສິນຈີສະເປັກຊາວ object.style.flex="1"

ຫຼັກຖານຫຼາຍຫຼາຍ

ການຕັ້ງສະພາບທີ່ຫຼາກຫຼາຍໃນການມີ flex ແລະ media query ສຳລັບຈຳນວນຂອງຈຳນວນຄືກັບຈຳນວນສັດສະດລາຊະນະ/ອຸປະກອນ.

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* ການຕັ້ງສະພາບຄືບພາບ - ສ້າງການຕັ້ງສະພາບທີ່ມີຈຳນວນບ່ອນນອກ 100% ທີ່ບໍ່ແມ່ນການຕັ້ງສະພາບສອງສອງສອງສອງ 50% */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

ທ້າທາຍສັນຍາການຕົວຕົນ

ການສະໜັບສະໜູນບັນຊີບັນນາທິການ

ຈຳນວນທີ່ມີໃນຕາລະບັນສະແດງວ່າຄຳໂຊກການທີ່ສຸດທ້າຍທີ່ສະຫຼາດສະໜັບສະໜູນຄຳໂຊກການນັ້ນ.

ຈຳນວນທີ່ມີ -webkit-、-ms- ຫຼື -moz- ໃນຈຳນວນທີ່ສຸດທ້າຍຂອງຄຳໂຊກການປະກອບສັນຍາການໃຊ້ຄຳໂຊກການກ່ອນ.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • ກັບໄປບ່ອນຫຼັງ filter
  • ກັບໄປບ່ອນຕໍ່ໄປ flex-basis