Docs/CSS/Flexbox

CSS Flexbox

Flexbox menyusun elemen dalam satu dimensi (row/column).

Container Properties

  • display: flex
  • flex-direction — row, column, row-reverse
  • justify-content — main axis alignment
  • align-items — cross axis alignment
  • flex-wrap — wrap jika penuh
  • gap — jarak antar item

Item Properties

  • flex: 1 — grow to fill
  • flex-shrink — shrink ratio
  • align-self — override alignment
  • order — urutan tampil
style.css
Try It →
.fc {
  display:flex;
  gap:12px;
  padding:16px;
  background:#F1F5F9;
  border-radius:12px;
  margin-bottom:16px;
}
.fi {
  flex:1;
  padding:16px;
  background:linear-gradient(135deg,#6DD5C4,#7EB8F0);
  color:white;
  border-radius:8px;
  text-align:center;
  font-weight:bold;
}
.flex-center {
  display:flex;
  justify-content:center;
  align-items:center;
  height:100px;
  background:#1E293B;
  border-radius:12px;
  color:white;
}