TPToolpazar

Global Araç

Flexbox Playground

1
2
3

Öğeler (3/8)

#1
#2
#3

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}
.container > :nth-child(1) {
  flex: 0 1 auto;
}
.container > :nth-child(2) {
  flex: 0 1 auto;
}
.container > :nth-child(3) {
  flex: 0 1 auto;
}

Experiment with every common flexbox property — justify-content, align-items, flex-direction, flex-wrap, gap, and item sizing — with an interactive demo. As you change controls, the CSS rule builds live in the output panel.

For grid instead use grid layout generator. For visual polish, box shadow generator and border radius generator.

Nasıl Kullanılır

  1. Toggle flex-direction, justify-content, align-items.
  2. Change item count and per-item flex basis.
  3. Watch the live preview update.
  4. Copy the generated parent + child CSS.