CSS FLEXBOX

Pengertian

Flexbox adalah mode pengaturan atau konsep layout pada CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web. 

Flexbox memungkinkan untuk mengatur layout, posisi, dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis. Kata "flex" diambil dari kata "flexible" yang berarti mudah diatur, disesuaikan, dan ditukar-tukar. 

Latihan Flex Box:

Code HTML : 

contoh memakai flex-wrap: wrap;

contoh memakai flex-wrap: nowrap;

contoh memakai flex-wrap: wrap-reverse;

2.Flex Direction 

    contoh code html :

 contoh css memakai flex-direction: row;

 contoh css memakai flex-direction: row-reverse;

contoh css memakai flex-direction: column;

contoh css memakai flex-direction: column-reverse;

3. Justify Content

        Contoh code html :

  contoh css memakai justify-content: flex-start;

contoh css memakai justify-content: flex-end;

contoh css memakai justify-content: center;

contoh css memakai justify-content: space-around;

4. Align Item

    Contoh code HTML :

Contoh CSS memakai align-items: flex-start;

 

Contoh CSS memakai align-items: flex-end;

Contoh CSS memakai align-items: center;

Contoh CSS memakai align-items: stretch;