Belajar CSS FlexBox #Bagian 5 Align Self
Property align-self memungkinkan kita untuk mengatur atau mengubah posisi dari satu atau lebih item dari kelompoknya, maksudnya kita bisa mengatur satu item posisinya berbeda dengan items yang lain.
Property align-self itu digunakan oleh items atau disematkan kepada items, bukan kepada container.
Semoga bisa di pahami, tapi jika teman-teman belum paham, teman - teman bisa lihat gambar di bawah ini.
Posisi items yaitu box 1 sampai box 4 seperti pada gambar, dimana containernya memiliki property justify-content:center, align-items:center dan flex-direction:row.
Selanjutnya saya ingin merubah posisi box 1 berada di atas menempel dengan container sisi atas. Caranya adalah dengan memberikan property align-self:flex-start pada class box1.
Bagaimana jika saya mau mau merubah posisi box 1 dan box 2 berada di bawah, atau menempel disisi bagian bawah container. Jawabannya adalah kita memberi align-self:flex-end pada class box1 dan box2. Lihat gambar di bawah ini.
Jika teman - teman ingin merubah khusus Box 1 dan Box 2 tingginya sama dengan tinggi container, maka teman - teman bisa menggunakan align-self:stretch. Tapi sebelumnya teman - teman pastikan bahwa class box1 dan box2 tingginya nilainya auto. Lihat gambar di bawah.
Agar Box 1 dan Box 2 kembali keposisi awal yaitu di tengah, maka teman-teman gunakan property:align-self:center;
Masih ada nilai lagi yang bisa digunakan oleh property align-self yaitu: baseline. teman- teman bisa mencobanya sendiri.
Mungkin cukup dulu penjelasan tentang css flexbox align-self, jika ada pertanyaan teman - teman bisa komen di bagian bawah. Terima kasih. Happy coding.
Property align-self itu digunakan oleh items atau disematkan kepada items, bukan kepada container.
Semoga bisa di pahami, tapi jika teman-teman belum paham, teman - teman bisa lihat gambar di bawah ini.
 |
| klik gambar agar lebih jelas |
Posisi items yaitu box 1 sampai box 4 seperti pada gambar, dimana containernya memiliki property justify-content:center, align-items:center dan flex-direction:row.
Selanjutnya saya ingin merubah posisi box 1 berada di atas menempel dengan container sisi atas. Caranya adalah dengan memberikan property align-self:flex-start pada class box1.
Bagaimana jika saya mau mau merubah posisi box 1 dan box 2 berada di bawah, atau menempel disisi bagian bawah container. Jawabannya adalah kita memberi align-self:flex-end pada class box1 dan box2. Lihat gambar di bawah ini.
Jika teman - teman ingin merubah khusus Box 1 dan Box 2 tingginya sama dengan tinggi container, maka teman - teman bisa menggunakan align-self:stretch. Tapi sebelumnya teman - teman pastikan bahwa class box1 dan box2 tingginya nilainya auto. Lihat gambar di bawah.
Agar Box 1 dan Box 2 kembali keposisi awal yaitu di tengah, maka teman-teman gunakan property:align-self:center;
Masih ada nilai lagi yang bisa digunakan oleh property align-self yaitu: baseline. teman- teman bisa mencobanya sendiri.
Mungkin cukup dulu penjelasan tentang css flexbox align-self, jika ada pertanyaan teman - teman bisa komen di bagian bawah. Terima kasih. Happy coding.
Post a Comment for "Belajar CSS FlexBox #Bagian 5 Align Self"