Atölye › Trafik lambası › 5/12. adım

Ortada alt alta diz

Ne yapıyoruz

Lambalar gövdenin sol üstüne yığıldı. Onları düzenli dizmek için gövdeye flexbox diyoruz: "içindekileri sen yerleştir". Alt alta dizilecekler, aralarındaki boşluk eşit olacak ve ortalanacaklar.

```css
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
```

Ne işe yarıyor

• display: flex; → gövde, içindeki kutuları (lambaları) kendisi yerleştirir.
• flex-direction: column; → sütun hâlinde, alt alta diz (varsayılan yan yanadır).
• justify-content: space-around; → dizildikleri yöndeki (burada dikey) boş yeri her lambanın etrafına eşit dağıt.
• align-items: center; → öbür yönde (yatay) ortala.

Sıra sende

Dört satırı .light kuralının içine, border-radius satırının altına ekle. Çalıştır.

Beceriler: CSS ile görünüm

← Yuvarlak lambalar Kırmızı, sarı, yeşil →

Tüm adımlar

1. Boş bir kutu
2. Kutuya biçim ver
3. İçine üç lamba
4. Yuvarlak lambalar
5. Ortada alt alta diz
6. Kırmızı, sarı, yeşil
7. Söndür
8. Bir lamba için zaman çizelgesi
9. Çizelgeyi oynat
10. Sırayla
11. Hız için tek ayar
12. Kendin yap: direk