ຂ້າມໄປຫາເນື້ອຫາຫຼັກ
LibraTool logoLibraTool

ເຄື່ອງກໍາເນີດ CSS Flexbox ຟຣີ

ທົດລອງເອົາທິດທາງ flex, ກອບ, justify ແລະ align ເທິງລາຍການກ່ວາວ — ແລະ ສຳເນົາ CSS.

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ
ການຕັ້ງຄ່າລ່ວງໜ້າ

ຄຳແນະນຳ: ຄລິກລາຍການໃນການເບິ່ງຕົວຢ່າງເພື່ອສະຫຼັບ flex-grow: 1 ກັບມັນ.

ເບິ່ງຕົວຢ່າງກ່ວາວ
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 ທຸກຢ່າງຄໍາວ່າໃນບຣາວເຊີ — ບໍ່ມີຫຍັງອັບໂຫລດ.

ມັນເຮັດວຽກແນວໃດ

ສະໜາມທົດລອງ flexbox ແບບໂຕ້ຕອບ: ສະຫຼັບ flex-direction, wrap, justify-content ແລະ align-items ແລ້ວເບິ່ງອົງປະກອບເຖິງ 10 ອັນຈັດຮຽງໃໝ່ທັນທີ. ກົດອົງປະກອບໃດກໍ່ໄດ້ເພື່ອໃຫ້ມັນ flex-grow: 1 ແລະ ເບິ່ງວ່າມັນຍຶດພື້ນທີ່ແນວໃດ. CSS ອັບເດດແບບສົດ, ພ້ອມສຳເນົາເຂົ້າໂປຣເຈັກຂອງທ່ານ.

  1. 1
    ຕັ້ງຄ່າ container
    ທິດທາງ, wrap, justify-content, align-items, gap.
  2. 2
    ເພີ່ມອົງປະກອບ
    ອົງປະກອບ flex ທີ່ນັບເລກໜຶ່ງຫາສິບອັນ.
  3. 3
    ທົດລອງ
    ກົດອົງປະກອບເພື່ອສະຫຼັບ flex-grow ແລະ ເບິ່ງຜົນ.
  4. 4
    ສຳເນົາ CSS
    ກົດ container (ແລະ item), ພ້ອມສຳລັບການວາງ.

ທຸກຢ່າງເຮັດວຽກຢູ່ໃນບຣາວເຊີຂອງທ່ານ — ບໍ່ມີສິ່ງໃດຖືກອັບໂຫຼດ.

ເຄື່ອງມືທີ່ກ່ຽວຂ້ອງ

🟦

ເຄື່ອງກໍາເນີດ CSS Grid

ອອກແບບ CSS grid ທາງພາບ — ຕາມຮອຍ, ຫົວໜ່ວຍ ແລະ ຊ່ອງວ່າງ — ແລະ ສຳເນົາ CSS ໄປມາ ແລະ HTML.

ລອງໃຊ້
🌈

ຕົວສ້າງ CSS Gradient

ສ້າງ linear, radial ແລະ conic CSS gradient ພ້ອມຕົວຢ່າງ live. ຄັດລອກ CSS ດ້ວຍ click ດຽວ.

ລອງໃຊ້
🎨

ຕົວສ້າງ CSS Box Shadow

ສ້າງ CSS box-shadow ດ້ວຍ visual builder ພ້ອມຕົວຢ່າງ live, ຊັ້ນຫຼາຍ, color picker, inset toggle ແລະ ຄັດລອກດ່ວນ. ລວມ preset Material, neumorphism ແລະ glow.

ລອງໃຊ້

ຄໍາຖາມທີ່ຖາມເລື້ອຍໆ