Spear — Learn to Code

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;
}

← Previous

Display

Grid