Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng Gumagawa ng CSS Flexbox

Mag-eksperimento sa flex direction, wrap, justify at align sa live items — at kopyahin ang CSS.

Gumagana offline kapag na-load na
Mga preset

Tip: i-click ang isang item sa preview upang i-toggle ang flex-grow: 1 dito.

Live na Preview
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>

🔒 Lahat ay tumatakbo sa iyong browser — walang upload.

Paano ito Gumagana

Isang interactive na flexbox playground: palitan ang flex-direction, wrap, justify-content at align-items at panoorin ang hanggang 10 live na item na agad nag-aayos. I-click ang kahit anong item para bigyan ito ng flex-grow: 1 at makita kung paano nito kinukuha ang espasyo. Live na nag-a-update ang CSS, handang kopyahin sa proyekto mo.

  1. 1
    Itakda ang container
    Direction, wrap, justify-content, align-items, gap.
  2. 2
    Magdagdag ng item
    Isa hanggang sampung may-numerong flex item.
  3. 3
    Mag-eksperimento
    I-click ang isang item para i-toggle ang flex-grow at makita ang epekto.
  4. 4
    Kopyahin ang CSS
    Ang mga rule ng container (at item), handang i-paste.

Tumatakbo ang lahat sa iyong browser — walang ina-upload.

Mga Kaugnay na Tool

🟦

Gumagawa ng CSS Grid

I-design nang visual ang CSS grid — tracks, units at gaps — at kopyahin ang generated CSS at HTML.

Subukan
🌈

Gumagawa ng CSS Gradient

Gumawa ng linear, radial, at conic na CSS gradient na may live preview. Kopyahin ang CSS sa isang click.

Subukan
🎨

Gumagawa ng CSS Box Shadow

Visual builder para sa CSS box-shadow na may live preview, multi-layer stacking, color picker, inset toggle, at one-click na kopya. Kasama ang Material, neumorphism, at glow preset.

Subukan

Mga Madalas na Itanong