LibraTool logoLibraTool

Ẹ̀rọ Àṣẹ̀dá CSS Flexbox Ọ̀fẹ́

Dán ìtọ́ni flex, wíwú, ìdọ́gba àti ìlàjọpọ̀ wò lórí àwọn nǹkan tààrà — kí o sì dàkọ CSS.

Ó ń ṣiṣẹ́ láìsí ìsopọ̀ ní kété tí a bá kó wọlé
Àwọn ìṣètò

Ìmọ̀ràn: tẹ nǹkan kan nínú àwòrán àkọ́kọ́ láti yí flex-grow: 1 padà lórí rẹ̀.

Àwòrán àkọ́kọ́ tààrà
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>

🔒 Ohun gbogbo ń ṣiṣẹ́ nínú browser rẹ — kò sí ohun tí a gbé sí orí ayélujára.

Bí Ó Ṣe Ń Ṣiṣẹ́

Pátẹ́lì ìdánwò flexbox kan tí a lè fọwọ́kan: yí flex-direction, wrap, justify-content àti align-items padà kí o sì wo àwọn ohun 10 láàyè tí ó ń tò padà lẹ́sẹ̀kẹsẹ̀. Tẹ ohun èyíkéyìí láti fún un ní flex-grow: 1 kí o sì wo bí ó ṣe ń gba àyè. CSS náà ń yí padà láàyè, tí ó ti ṣetán láti lẹ̀ sínú iṣẹ́ rẹ.

  1. 1
    Ṣètò àpótí náà
    Ìtọ̀nà, wrap, justify-content, align-items, gap.
  2. 2
    Fi àwọn ohun kún un
    Ọ̀kan sí mẹ́wàá ohun flex tí a fi nọ́mbà sí.
  3. 3
    Ṣe àdánwò
    Tẹ ohun kan láti tan flex-grow kí o sì wo ipa rẹ̀.
  4. 4
    Dàkọ CSS náà
    Àwọn òfin àpótí (àti ohun), tí ó ti ṣetán láti lẹ̀.

Ohun gbogbo ń ṣiṣẹ́ nínú aṣàwákiri rẹ — kò sí ohunkóhun tí a gbé sókè.

Àwọn Irinṣẹ Tó Jọra

🟦

Ẹ̀rọ Àṣẹ̀dá CSS Grid

Ṣe àpẹrẹ CSS grid lọ́nà àwòrán — àwọn ọ̀nà, ìwọ̀n àti àlàfo — kí o sì dà́kọ CSS àti HTML tí a dá.

Gbìyànjú rẹ̀
🎨

Olùmúdásílẹ̀ CSS Box Shadow

Ohun èlò ìṣàkàwé fún CSS box-shadow pẹ̀lú àyẹ̀wò lákòókò gidi, ìdìpọ̀ ọ̀pọ̀lọpọ̀ ìpele, olùyan àwọ̀, ìyí inset, àti àdàkọ ní ìtẹ̀ kan. Ó ní àwọn ìsètò Material, neumorphism, àti dídán.

Gbìyànjú rẹ̀
◖

Olùmúdásílẹ̀ CSS Border Radius

Ṣàkàwé àwọn igun tí ó yí ká pẹ̀lú ìdarí ọ̀tọ̀ọ̀tọ̀ fún igun kọ̀ọ̀kan. Ó ń ṣètìlẹyìn fún gírámà X/Y elliptical fún àwọn ìrísí blob àdánidá.

Gbìyànjú rẹ̀

Àwọn Ìbéèrè Tí A Máa Ń Béèrè