LibraTool logoLibraTool

Kyauta Mai Ƙirƙirar CSS Flexbox

Gwada shugabanci na flex, nadewa, daidaitawa da tsari akan abubuwa masu rai — sannan ka kwafi CSS.

Yana aiki babu haɗi da zarar an loda shi
Saitattun tsari

Shawara: danna abu a cikin gani don kunna/kashe flex-grow: 1 a kansa.

Gani kai tsaye
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>

🔒 Komai yana gudana a burauzarka — ba a loda komai.

Yadda Yake Aiki

Wurin wasa mai amsawa na flexbox: sauya flex-direction, wrap, justify-content da align-items ka kalli har zuwa abubuwa 10 masu rai suna sake tsari nan take. Danna kowane abu don ba shi flex-grow: 1 ka gani yadda yake da'awar sarari. CSS yana sabuntawa nan take, a shirye don kwafi zuwa aikinka.

  1. 1
    Saita akwatin
    Alkibla, wrap, justify-content, align-items, gap.
  2. 2
    Ƙara abubuwa
    Ɗaya zuwa goma abubuwan flex masu lamba.
  3. 3
    Gwaji
    Danna wani abu don sauya flex-grow ka ga tasirin.
  4. 4
    Kwafi CSS
    Ka'idojin akwatin (da abu), a shirye don manna.

Komai yana gudana a burauzarka — babu wani da ake loda shi.

Kayan Aiki Masu Alaƙa

🟦

Mai Ƙirƙirar CSS Grid

Ƙirƙiri grid ɗin CSS ta hanyar gani — hanyoyi, raka'o'i da gibi — sannan ka kwafi CSS da HTML da aka ƙirƙira.

Gwada shi
🎨

Mai Ƙirƙirar CSS Box Shadow

Kayan aikin gani don CSS box-shadow tare da preview mai rai, tarawa na layuka da yawa, zaɓin launi, sauyawar inset, da kwafi da danna guda ɗaya. Ya haɗa da zaɓuɓɓuka na Material, neumorphism, da haske.

Gwada shi
◖

Mai Ƙirƙirar CSS Border Radius

Ƙirƙiri kusurwoyi masu zagaye a gani tare da iko na musamman a kan kowace kusurwa. Yana goyan bayan tsarin elliptical X/Y don siffofin blob na halitta.

Gwada shi

Tambayoyin Da Ake Yi Sau Da Dama