Latihan 2 dari materi Flexbox: Alignment di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kotak A, B dan C sekarang bertumpuk di pinggir kiri. Pindahkan tumpukannya ke tengah kiri-kanan pakai flexbox, dengan kotak tetap tersusun dari atas ke bawah.
Di rule .container yang sudah ada, tambahkan:
display: flex
flex-direction: column, biar kotaknya tetap tersusun ke bawah
align-items: center, biar tumpukannya di tengah kiri-kanan
Hint
Kotaknya tetap ditumpuk ke bawah, cuma digeser ke tengah. Di flex, arah susunan diatur dulu, baru posisinya.
flex-direction: column bikin item tersusun ke bawah. Sesudah itu sumbu silangnya kiri-kanan, jadi align-items: center menaruhnya di tengah kiri-kanan.