Flexbox Generator

ທົດລອງທິດທາງ flex, wrap, justify, and align. ເບິ່ງການຈັດວາງລາຍການອັບເດດສົດ, ຈາກນັ້ນສຳເນົາ CSS ບັນຈຸ.

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

ທົດລອງທິດທາງ flex, wrap, justify, and align — see layouts update live.
ແລ່ນຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານ
ໃຊ້ຟຣີ

ວິທີການນໍາໃຊ້

ກໍານົດທິດທາງ flex ແລະຫໍ່.
ປັບແຕ່ງເນື້ອຫາແລະຈັດວາງລາຍການ.
ຄັດລອກ Flexbox CSS.

How this tool works

ກໍານົດທິດທາງ flex ແລະຫໍ່.
ປັບແຕ່ງເນື້ອຫາແລະຈັດວາງລາຍການ.
ຄັດລອກ Flexbox CSS.

Recommended settings

ໃຊ້ຕົວເລືອກເລີ່ມຕົ້ນກ່ອນ, ຈາກນັ້ນປັບປ່ຽນຖ້າຈໍາເປັນ

Supported formats

Text / on-page input

File size and limits

ການເບິ່ງຕົວຢ່າງຫຼາຍຊັ້ນທີ່ສັບສົນຫຼາຍອາດຈະຮູ້ສຶກຊ້າກວ່າໃນໂທລະສັບລຸ້ນເກົ່າ.

Privacy

ເຄື່ອງກໍາເນີດສີ & CSS ເຮັດວຽກທັງຫມົດໃນຕົວທ່ອງເວັບຂອງທ່ານ. ການເບິ່ງຕົວຢ່າງແລະການແປງບໍ່ເຄີຍອັບໂຫລດຮູບແບບຂອງທ່ານ.

Common use cases

ໃຊ້ Flexbox Generator ທຸກຄັ້ງທີ່ທ່ານຕ້ອງການ: ທົດລອງທິດທາງ flex, wrap, justify, and align — see layouts update live.

Troubleshooting

ຕົວຢ່າງຈະແຕກຕ່າງກັນຫຼັງຈາກວາງ

ກວດເບິ່ງ CSS ທີ່ມີການແຂ່ງຂັນຢູ່ໃນຫນ້າຂອງທ່ານ (ຣີເຊັດ, ສີທີ່ສືບທອດ). ສຳເນົາກົດລະບຽບທີ່ສ້າງຂຶ້ນໃສ່ແຜ່ນສະໄຕລ໌ທີ່ໂດດດ່ຽວກ່ອນ.

FAQ

ນີ້ອັບໂຫລດ CSS ຂອງຂ້ອຍບໍ?

ບໍ່. ເຄື່ອງສ້າງ ແລະຕົວແປງສັນຍານແລ່ນຢູ່ໃນບຣາວເຊີຂອງທ່ານດ້ວຍການເບິ່ງຕົວຢ່າງສົດໆ.

ຂ້ອຍຕ້ອງການບັນຊີບໍ?

ບໍ່. ເປີດເຄື່ອງມື, tweak ການຄວບຄຸມ, ແລະຄັດລອກ CSS.

Flexbox Generator