Belajar CSS Flexbox Secara Interaktif

1 mnt dibaca
Baca dalam bahasa lain: English

🔗 Bermain Flexbox

Kontainer

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Content

Item

Item 1

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

Item 2

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

Item 3

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

<div class="kontainer">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
<style>
.kontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  height: 100%;
}
.item {
  background-color: #ed8936;
  color: #fff;
  width: 4rem;
  height: 4rem;
  border-radius: 0.25rem;
  margin: 0.25rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.25rem;
  cursor: pointer;
}
</style>
Sunting demo di Github AppFlexbox

🔗 Poin Pembelajaran

Jadi menurut Kamu apa itu Flexbox? Jawab dengan cara mengurutkan kata acak di bawah ini agar menjadi jawaban yang tepat ya. Jawaban Kamu akan disimpan di basis data Firestore selama 30 hari.

Sehingga ketika Kamu mengakses halaman ini lagi, Kamu masih dapat melihat jawaban kamu kembali, asalkan masih dalam tenggang waktu 30 hari tersebut.

🔗 Referensi

  1. CSS Tricks: A Complete Guide to Flexbox
  2. Mozilla Developer Network: Flexbox
  3. W3Schools: CSS Flexbox