Flexbox Character Selection & Item Cards Layout
Menggunakan Flexbox untuk membuat layout kartu game yang fleksibel dan responsif.
Warrior
High HP, Medium Attack
Mage
Low HP, High Magic
Ranger
Balanced Range
Why Flexbox?
Before Flexbox
Float hacks, manual positioning, dan mobile responsive terasa complicated.
With Flexbox
Flexible layouts, easy alignment, responsive by default, dan cocok untuk one-dimensional layout.
Flexbox Basics
Aktifkan flexbox pada container, lalu atur arah, alignment, dan jarak antar item.
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> .container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; }
Flexbox Properties
Container
display: flex, flex-direction, justify-content, align-items, gap, flex-wrap.
Item
flex: 1, flex-basis: 200px, align-self: center.
Character Selection Layout
Gunakan `flex-wrap` supaya kartu karakter tetap rapi saat layar mengecil.
.character-selection { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 30px; } .character-card { flex: 1; min-width: 250px; text-align: center; }
Iron Sword
Attack: +10
Price: 100 Gold
Shield
Defense: +8
Price: 80 Gold
.item-shop { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 20px; } .item-card { flex: 0 1 calc(25% - 15px); }
Responsive with Flexbox
/* Desktop: 4 columns */ .item-card { flex: 0 1 calc(25% - 15px); } /* Tablet: 2 columns */ @media (max-width: 768px) { .item-card { flex: 0 1 calc(50% - 10px); } } /* Mobile: 1 column */ @media (max-width: 480px) { .item-card { flex: 0 1 100%; } }
Activity & Practice
- Create character selection dengan 3+ cards.
- Create item shop dengan 4+ item cards.
- Use flexbox untuk layout.
- Make responsive dan test di mobile view.
Homework: Add more characters/items, style dengan colors & fonts, test on different screen sizes.
Mini Quiz
Property untuk membuat item flex turun ke baris baru adalah...