Flexbox

Pelajaran 3 dari 15 dalam kursus CSS Flexbox: Kursus Lengkap di Coddy.

Mari kita bahas flex container.

Untuk membuat flex container, atur property display ke flex,

.container {
  display: flex;
}

Ini dapat digunakan dengan bagian HTML berikut,

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Tantangan

Mudah

Buat container flex.

Kamu diberi kode HTML untuknya, tugasmu adalah menambahkan kode CSS yang hilang.

Catatan: Jangan ubah kode HTML yang diberikan atau CSS yang mewarnai elemen.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </body>
</html>

Semua pelajaran di CSS Flexbox: Kursus Lengkap

1Pengenalan

Pengenalan Wadah dan Item

2Kontainer Flex

Flexboxflex-direction flex-wrap flex-flow justify-content align-items align-content gap Tepat di Tengah

3Item Flex

Elemen Anak order flex-grow align-self

Latihan sendiri: Playground Web