The My Project

Beranda
CSS

CSS | BAB 6 Pengaturan Layout

 


Properti display

Merupakan properti CSS yang digunakan untuk mengatur tampilan suatu elemen. Properti ini memiliki beberapa nilai, seperti "block", "inline", "inline-block", "none", dan lain-lain.
penggunaan properti display:

Properti Display inline Display inline block Display block
Lebar dan tinggi Tidak bisa ditentukan secara eksplisit Bisa ditentukan secara eksplisit Bisa ditentukan secara eksplisit
Margin dan padding Hanya margin atas dan bawah yang bisa ditentukan Margin dan padding bisa ditentukan di semua sisi Margin dan padding bisa ditentukan di semua sisi
Perilaku Elemen akan diposisikan sejajar dengan elemen lain, tetapi elemen berikutnya akan dimulai di baris baru Elemen akan diposisikan sejajar dengan elemen lain, tetapi elemen berikutnya akan dimulai di baris yang sama Elemen akan dimulai di baris baru dan akan mengisi seluruh lebar halaman
Display block

Display block adalah salah satu nilai dari properti display CSS. Nilai ini menentukan bahwa elemen HTML harus ditampilkan sebagai blok. Elemen blok selalu memulai baris baru di halaman web, dan akan mengambil seluruh lebar yang tersedia, dengan margin atas dan bawah, tetapi bukan di samping. 

   <!DOCTYPE html>
<html>
  <head>
    <title>Contoh Display Block</title>
  </head>
  <style>
    .container {
      display: block;
      background-color: cyan;
      margin: 10px;
    }
    .box {
      color: flex;
      width: 50px;
      height: 50px;
      background-color: coral;
      margin: 5px;
    }
  </style>
  <body>
    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>

    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </body>
</html>
1
2
3
1
2
3

Elemen blok memiliki beberapa karakteristik yang membedakannya dari elemen inline, yaitu:

  • Elemen blok selalu memulai baris baru di halaman web.
  • Elemen blok akan mengambil seluruh lebar yang tersedia, dengan margin atas dan bawah, tetapi bukan di samping.
  • Elemen blok dapat memiliki lebar dan tinggi yang ditentukan.

Elemen-elemen HTML yang memiliki nilai default display block antara lain:

  • <div>
  • <p>
  • <ul>
  • <ol>
  • <table>

Elemen-elemen HTML ini akan ditampilkan sebagai blok secara default, kecuali jika nilai display-nya diubah dengan menggunakan CSS.

Display inline

Display inline adalah properti yang digunakan untuk menampilkan elemen sebagai elemen inline. Elemen inline adalah elemen yang tidak memulai baris baru, dan akan ditempatkan sejajar dengan elemen lain atau dengan teks di sekitarnya.

Beberapa contoh elemen inline adalah:

  • <span>
  • <a>
  • <img>
  • <input>
  • <select>
  • <textarea>

Contoh penggunaan display: inline adalah untuk membuat menu horizontal. Dengan menggunakan display: inline, elemen menu akan ditempatkan sejajar satu sama lain tanpa memulai baris baru. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Display inline </title>
    <style>
      ul {
        list-style-type: none;
        margin: 20px;
      }

      li {
        display: inline;
        margin: 10px;
      }

      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </body>
</html>
menu 1
menu 2
menu 3

Selain untuk membuat menu horizontal, display inline juga dapat digunakan untuk:

  • Menampilkan teks atau gambar di samping teks lain
  • Membuat tombol atau ikon
  • Membuat kotak teks yang dapat diedit
Display inline block

Display inline block CSS adalah properti CSS yang mengatur bagaimana elemen diposisikan dalam aliran halaman. Elemen dengan display inline block memiliki karakteristik gabungan dari elemen inline dan elemen block.

Karakteristik elemen inline block:

  • Elemen inline block dapat diposisikan sejajar dengan elemen lain, seperti elemen inline.
  • Elemen inline block dapat memiliki lebar dan tinggi yang ditentukan secara eksplisit, seperti elemen block.
  • Elemen inline block dapat memiliki margin dan padding di semua sisi, seperti elemen block.

Contoh penggunaan display inline block :

  • Untuk membuat tombol yang dapat diposisikan sejajar dengan teks lain, kita dapat menggunakan display inline block.
  • Untuk membuat daftar elemen yang dapat diposisikan sejajar dengan elemen lain, kita juga dapat menggunakan display inline block. 
<!DOCTYPE html>
<html>
  <head>
    <title>Contoh Display inline Block</title>
  </head>
  <style>
    .btn {
      display: inline-block;
      width: 100px;
      height: 50px;
      background-color: red;
      color: white;
      border-radius: 40px;
      margin: 15px;
    }
  </style>
  <body>

    <button class="btn"> Click Me!</button>
    <button class="btn"> Click Me!</button>
    <button class="btn"> Click Me!</button>
    <button class="btn"> Click Me!</button>
    <button class="btn"> Click Me!</button>

  </body>
</html>
Display flex

Display flex CSS adalah properti CSS yang digunakan untuk membuat elemen HTML menjadi kontainer flex. Kontainer flex adalah elemen yang memiliki anak-anak yang dapat ditata secara fleksibel.

Dengan menggunakan display flex CSS, kita dapat mengatur tata letak elemen-elemen HTML secara lebih fleksibel dan responsif. Misalnya, kita dapat membuat elemen-elemen HTML berbaris secara horizontal atau vertikal, atau kita dapat membuat elemen-elemen HTML dibungkus dalam baris atau kolom jika tidak muat dalam satu baris atau kolom.

Terminologi pada flexbox
image_title
image_title
image_title
image_title
image_title
generate flexbox
Flexbox Generator

Flexbox Generator

1
2
3
element {

}
Display none

Display none dalam CSS adalah properti yang digunakan untuk menyembunyikan elemen HTML dari layar. Elemen yang memiliki properti display none tidak akan ditampilkan di layar, tetapi masih akan ada di dokumen HTML. Elemen tersebut juga tidak akan dihitung dalam tata letak halaman.

Untuk menggunakan display none, kita bisa menambahkan properti ini ke elemen HTML dalam file CSS. Misalnya, untuk menyembunyikan elemen <div> dengan id "myDiv", kita bisa menggunakan kode CSS berikut: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>display none</title>
    <style>
      #myDiv {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="myDiv">This is my hidden div.</div>
  </body>
</html>






Dalam contoh ini, elemen <div> dengan id "myDiv" akan disembunyikan dari layar. Elemen tersebut masih akan ada di dokumen HTML, tetapi tidak akan ditampilkan.

Display none sering digunakan untuk menyembunyikan elemen yang tidak perlu ditampilkan di layar, misalnya:

  • Elemen yang hanya digunakan untuk pengembangan dan tidak akan digunakan oleh pengguna akhir.
  • Elemen yang hanya akan ditampilkan dalam kondisi tertentu, misalnya ketika pengguna telah login.
  • Elemen yang tidak penting untuk tata letak halaman.

Display none juga sering digunakan bersama dengan JavaScript untuk membuat efek animasi, misalnya untuk menyembunyikan dan menampilkan elemen secara bergantian.

Properti position

Static

position static adalah nilai default untuk properti display dalam CSS. Nilai ini membuat elemen HTML mengalir secara normal, sesuai dengan aliran teks dan elemen lainnya. Elemen dengan display static tidak akan terpengaruh oleh properti top, bottom, left, right, atau z-index.

Kegunaan position static adalah untuk membuat elemen HTML mengalir secara normal, tanpa perlu mengatur properti top, bottom, left, right, atau z-index. Hal ini dapat berguna untuk membuat elemen HTML yang mengikuti aliran teks, seperti paragraf, list, atau tabel.

Berikut adalah contoh penggunaan display static: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 { text-align: center; }
      #original-position {
      border: 2px solid greenyellow;
      }
      div.static {
        position: static;
        border: 2px solid red;
      }
    </style>
  </head>
  <body>
    <h2>position: static;</h2>

    <p id="original-position">
      Elemen original position
    </p>

    <div class="static">Elemen div ini memiliki posisi: statis;</div>
  </body>
</html>

position: static;

Elemen original position

Elemen div ini memiliki posisi: statis;

Relative

Dalam CSS, position relative adalah nilai dari properti position yang digunakan untuk mengatur tampilan elemen. Elemen dengan display relative masih mengikuti aliran normal dokumen, tetapi dapat diposisikan relatif terhadap posisi awalnya.

Kegunaan position relative adalah untuk:

  • Mengatur posisi elemen relatif terhadap posisi awalnya.
  • Mengatur elemen untuk tetap berada di posisinya bahkan ketika elemen lain di sekitarnya diubah posisinya.
  • Menambahkan efek "pop-up" pada elemen.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #original-position {
        border: 2px solid greenyellow;
      }
      h2 { text-align: center; }
      div.relative {
        position: relative;
        left: 30px;   /* opsional value lain ya bisa mengatur top / bottom / Right. tinggal disesuaikan saja dengan kebutuhan */
        border: 2px solid yellow;
      }
    </style>
  </head>
  <body>
    <h2>position: relative;</h2>

    <p id="original-position">
      Elemen original position
    </p>

    <div class="relative">Elemen div ini memiliki posisi: relative;</div>
  </body>
</html>

position: relative;

Elemen original position

Elemen div ini memiliki posisi: relative;

Absolute

Properti position absolute adalah posisi mutlak terhadap posisi dokumen. Elemen dengan properti position absolute akan ditempatkan pada posisi yang ditentukan dalam kode HTML, tetapi tidak akan terpengaruh oleh elemen lain yang berada di sekitarnya.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      h2 {
        text-align: center;
      }
      #original-position {
        border: 2px solid greenyellow;
      }
      div.absolute {
        position: absolute;
        left: 40px; /* opsional value lain ya bisa mengatur top / bottom / Right */
        top: 100px;
        border: 2px solid coral;
      }
    </style>
  </head>
  <body>
    <h2>position: absolute;</h2>

    <p id="original-position">Elemen original position 1</p>

    <div class="absolute">
      Elemen div ini memiliki posisi: absolute; ( position 2 )
    </div>

    <p id="original-position">Elemen original position 3</p>
  </body>
</html>

position: absolute;

Elemen div ini memiliki posisi: absolute; ( position 2 )

Elemen original position 1

Elemen original position 3

dari contoh diatas, elemen div position absolute ( posisi urut ke 2) naik keatas karna nilai position absolute top : 100px dan geser kearah kanan karna nilai position absolute left : 40px.

Fixed

position fixed adalah salah satu nilai dari properti position pada CSS. Nilai ini digunakan untuk memposisikan elemen secara tetap, tidak peduli seberapa jauh pengguna menggulir halaman. Elemen dengan display fixed akan selalu berada di posisi yang sama relatif terhadap viewport, atau jendela browser.

Kegunaan position fixed adalah untuk menampilkan elemen yang selalu ingin terlihat, bahkan saat pengguna menggulir halaman.
Contohnya adalah:

  • Header atau navbar. Header atau navbar biasanya selalu ingin terlihat, agar pengguna dapat dengan mudah bernavigasi di halaman.
  • Iklan. Iklan biasanya juga ingin terlihat, agar pengguna dapat melihatnya dengan mudah.
  • Menu atau tombol. Menu atau tombol biasanya juga ingin terlihat, agar pengguna dapat dengan mudah mengaksesnya.

Berikut adalah contoh penggunaan position fixed: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }
      .fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: red;
      }
      .original-position {
        margin-top: 55px;
        /* margin ini digunakan untuk memisahkan/memberi jarak antara div  */
      }
    </style>
  </head>
  <body>
    <div class="fixed">Elemen div ini memiliki posisi: fixed; ( header )</div>
    <div class="original-position">
      <p>original position 1</p>
      <p>original position 2</p>
      <p>original position 3</p>
      <p>original position 4</p>
      <p>original position 5</p>
      <p>original position 6</p>
      <p>original position 7</p>
      <p>original position 8</p>
      <p>original position 9</p>
      <p>original position 10</p>
      <p>original position 11</p>
      <p>original position 12</p>
      <p>original position 13</p>
      <p>original position 14</p>
      <p>original position 15</p>
      <p>original position 16</p>
      <p>original position 17</p>
      <p>original position 18</p>
      <p>original position 19</p>
      <p>original position 20</p>
      <p>original position 21</p>
      <p>original position 22</p>
      <p>original position 23</p>
      <p>original position 24</p>
      <p>original position 25</p>
      <p>original position 26</p>
      <p>original position 27</p>
      <p>original position 28</p>
      <p>original position 29</p>
      <p>original position 30</p>
      <p>original position 31</p>
      <p>original position 32</p>
      <p>original position 33</p>
      <p>original position 34</p>
      <p>original position 35</p>
      <p>original position 36</p>
      <p>original position 37</p>
      <p>original position 38</p>
      <p>original position 39</p>
      <p>original position 40</p>
      <p>original position 41</p>
      <p>original position 42</p>
      <p>original position 43</p>
      <p>original position 44</p>
      <p>original position 45</p>
      <p>original position 46</p>
      <p>original position 47</p>
      <p>original position 48</p>
      <p>original position 49</p>
      <p>original position 50</p>
    </div>
  </body>
</html>

Pada contoh di atas, elemen .fixed memiliki display fixed. Artinya, elemen .fixed akan selalu berada di posisi yang sama, yaitu di bagian atas layar, tidak peduli seberapa jauh pengguna menggulir halaman.

Perlu diperhatikan bahwa penggunaan display fixed dapat berdampak pada kinerja halaman. Hal ini karena elemen dengan display fixed tidak akan dimuat ulang saat pengguna menggulir halaman.

Sticky

Display sticky adalah salah satu properti CSS yang digunakan untuk mengatur posisi elemen di halaman web. Properti ini memiliki nilai "sticky", yang berarti bahwa elemen akan berperilaku seperti posisi relatif hingga mencapai titik tertentu yang ditentukan oleh properti "top" atau "bottom". Setelah mencapai titik tersebut, elemen akan berperilaku seperti posisi tetap dan tetap berada di posisi tersebut meski halaman web digeser.

Kegunaan display sticky adalah untuk membuat elemen tetap berada di posisi tertentu saat halaman web digeser. Hal ini dapat digunakan untuk berbagai keperluan, seperti:

  • Menampilkan judul atau navigasi di bagian atas halaman web, sehingga tetap terlihat saat pengguna menggulir halaman.
  • Menampilkan menu atau sidebar di bagian samping halaman web, sehingga tetap terlihat saat pengguna menggulir halaman.
  • Menampilkan indikator kemajuan di bagian atas halaman web, sehingga tetap terlihat saat pengguna menggulir halaman

Berikut adalah contoh penggunaan display sticky: 

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        font-family: Georgia, "Times New Roman", Times, serif;
        box-sizing: border-box;
      }

      h3 {
        background-color: coral;
        height: 40px;
        padding: 5px;
      }
      .sticky1 {
        position: sticky;
        top: 0px;
      }
      .sticky2 {
        position: sticky;
        top: 45px;
      }
      .sticky3 {
        position: sticky;
        top: 90px;
      }
    </style>
  </head>
  <body>
    <h1>position sticky</h1>
    <div class="sticky1">
      <h3>Elemen div ini memiliki posisi: sticky; ( judul1 )</h3>
    </div>

    <p>original position 1</p>
    <p>original position 2</p>
    <p>original position 3</p>
    <p>original position 4</p>
    <p>original position 5</p>
    <p>original position 6</p>
    <p>original position 7</p>
    <p>original position 8</p>
    <p>original position 9</p>
    <p>original position 10</p>
    <p>original position 11</p>
    <p>original position 12</p>
    <p>original position 13</p>
    <p>original position 14</p>
    <p>original position 15</p>
    <p>original position 16</p>
    <p>original position 17</p>
    <p>original position 18</p>
    <p>original position 19</p>
    <p>original position 20</p>
    <p>original position 21</p>
    <p>original position 22</p>
    <p>original position 23</p>
    <p>original position 24</p>
    <p>original position 25</p>
    <p>original position 26</p>
    <p>original position 27</p>
    <p>original position 28</p>
    <p>original position 29</p>
    <p>original position 30</p>

    <div class="sticky2">
      <h3>Elemen div ini memiliki posisi: sticky; ( judul2 )</h3>
    </div>

    <p>original position 1</p>
    <p>original position 2</p>
    <p>original position 3</p>
    <p>original position 4</p>
    <p>original position 5</p>
    <p>original position 6</p>
    <p>original position 7</p>
    <p>original position 8</p>
    <p>original position 9</p>
    <p>original position 10</p>
    <p>original position 11</p>
    <p>original position 12</p>
    <p>original position 13</p>
    <p>original position 14</p>
    <p>original position 15</p>
    <p>original position 16</p>
    <p>original position 17</p>
    <p>original position 18</p>
    <p>original position 19</p>
    <p>original position 20</p>
    <p>original position 21</p>
    <p>original position 22</p>
    <p>original position 23</p>
    <p>original position 24</p>
    <p>original position 25</p>
    <p>original position 26</p>
    <p>original position 27</p>
    <p>original position 28</p>
    <p>original position 29</p>
    <p>original position 30</p>
    <p>original position 31</p>
    <p>original position 32</p>
    <p>original position 33</p>
    <p>original position 34</p>
    <p>original position 35</p>
    <p>original position 36</p>
    <p>original position 37</p>
    <p>original position 38</p>
    <p>original position 39</p>
    <p>original position 40</p>
    <p>original position 41</p>
    <p>original position 42</p>
    <p>original position 43</p>
    <p>original position 44</p>
    <p>original position 45</p>

    <div class="sticky3">
      <h3>Elemen div ini memiliki posisi: sticky; ( judul3 )</h3>
    </div>

    <p>original position 1</p>
    <p>original position 2</p>
    <p>original position 3</p>
    <p>original position 4</p>
    <p>original position 5</p>
    <p>original position 6</p>
    <p>original position 7</p>
    <p>original position 8</p>
    <p>original position 9</p>
    <p>original position 10</p>
    <p>original position 11</p>
    <p>original position 12</p>
    <p>original position 13</p>
    <p>original position 14</p>
    <p>original position 15</p>
    <p>original position 16</p>
    <p>original position 17</p>
    <p>original position 18</p>
    <p>original position 19</p>
    <p>original position 20</p>
    <p>original position 21</p>
    <p>original position 22</p>
    <p>original position 23</p>
    <p>original position 24</p>
    <p>original position 25</p>
    <p>original position 26</p>
    <p>original position 27</p>
    <p>original position 28</p>
    <p>original position 29</p>
    <p>original position 30</p>
  </body>
</html>

Kode CSS di atas akan membuat elemen dengan class "sticky1","sticky2" dan "sticky3" berperilaku seperti posisi yang telah ditentukan dan sesuai batasan yang telah ditentukan.

properti float dan clear
properti float

Propert float adalah properti CSS yang digunakan untuk membuat elemen HTML terapung di atas elemen HTML lainnya. Elemen yang difloat akan diletakan di luar aliran dokumen dan akan diposisikan secara horizontal sesuai dengan nilai properti float yang digunakan.

Nilai properti float yang dapat digunakan adalah:

  • left: Elemen akan difloat ke kiri.
  • right: Elemen akan difloat ke kanan.
  • none: Elemen akan dikembalikan ke aliran dokumen.

Kegunaan properti float
Propert float dapat digunakan untuk berbagai keperluan, antara lain:

  • Membuat kolom dalam layout
  • Membuat elemen yang tidak terikat dengan elemen lain
  • Membuat efek animasi

properti clear

Propert clear adalah properti CSS yang digunakan untuk menghentikan efek float pada elemen HTML. Elemen yang diberi properti clear akan menempati aliran dokumen, sehingga elemen-elemen yang difloat di bawahnya akan diposisikan di atas elemen tersebut.

Nilai properti clear yang dapat digunakan adalah:

  • left: Elemen akan menempati aliran dokumen dan elemen-elemen yang difloat di bawahnya akan diposisikan di atas elemen tersebut.
  • right: Elemen akan menempati aliran dokumen dan elemen-elemen yang difloat di bawahnya akan diposisikan di atas elemen tersebut.
  • both: Elemen akan menempati aliran dokumen dan elemen-elemen yang difloat di kiri dan kanan elemen tersebut akan diposisikan di atas elemen tersebut. Kegunaan properti clear

Propert clear dapat digunakan untuk berbagai keperluan, antara lain:

  • Mengatasi elemen-elemen yang saling bertumpuk karena efek float
  • Membuat efek animasi

properti flexbox

flex-direction

Flex-direction adalah properti CSS yang menentukan arah utama (main axis) dan arahnya (normal atau terbalik) dari elemen-elemen flex dalam sebuah container flex.

Nilai-nilai yang dapat digunakan untuk properti flex-direction adalah sebagai berikut:

  • row : elemen-elemen flex akan ditempatkan secara horizontal dari kiri ke kanan.
  • row-reverse : elemen-elemen flex akan ditempatkan secara horizontal dari kanan ke kiri.
  • column : elemen-elemen flex akan ditempatkan secara vertikal dari atas ke bawah.
  • column-reverse : elemen-elemen flex akan ditempatkan secara vertikal dari bawah ke atas.

align-items

Align-items adalah properti CSS yang digunakan untuk mengatur posisi elemen anak dalam sebuah container flex atau grid sepanjang sumbu lintang (cross axis). Sumbu lintang adalah sumbu yang tegak lurus dengan sumbu utama (main axis).

Nilai default dari align-items adalah stretch, yang berarti elemen anak akan memperluas untuk mengisi ruang yang tersedia sepenuhnya. Nilai-nilai lain yang dapat digunakan untuk align-items adalah:

  • flex-start: Elemen anak akan diposisikan di awal sumbu lintang.
  • flex-end: Elemen anak akan diposisikan di akhir sumbu lintang.
  • center: Elemen anak akan diposisikan di tengah sumbu lintang.
  • baseline: Elemen anak akan diposisikan pada baseline elemen anak pertama.
  • stretch: Elemen anak akan memperluas untuk mengisi ruang yang tersedia sepenuhnya.
justify-content

Dalam CSS, justify-content adalah properti yang menentukan cara browser mendistribusikan ruang antara dan di sekitar elemen konten di sepanjang sumbu utama wadah fleksibel, dan sumbu baris wadah grid.

Nilai-nilai yang dapat digunakan untuk properti justify-content adalah sebagai berikut:

  • start: Elemen konten didistribusikan dari kiri ke kanan (atau atas ke bawah jika flex-direction: column). Ini adalah nilai default.
  • end: Elemen konten didistribusikan dari kanan ke kiri (atau bawah ke atas jika flex-direction: column).
  • center: Elemen konten didistribusikan di tengah sumbu utama.
  • between: Elemen konten didistribusikan secara merata di sepanjang sumbu utama, dengan ruang yang sama di antara setiap elemen.
  • around: Elemen konten didistribusikan secara merata di sepanjang sumbu utama, dengan ruang yang sama di antara setiap elemen dan di sekitar elemen paling kiri dan paling kanan.

align-content

Align-content adalah properti CSS yang digunakan untuk mengatur posisi flex item dalam flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu utama (cross-axis).

Sumbu utama (main axis) adalah sumbu yang sejajar dengan arah baris dalam flex container. Sumbu tegak lurus (cross-axis) adalah sumbu yang sejajar dengan arah kolom dalam flex container.

Align-content memiliki beberapa nilai yang dapat digunakan untuk mengatur posisi flex item, yaitu:

  • flex-start: Flex item akan diposisikan di awal sumbu cross-axis.
  • flex-end: Flex item akan diposisikan di akhir sumbu cross-axis.
  • center: Flex item akan diposisikan di tengah sumbu cross-axis.
  • space-between: Flex item akan diposisikan dengan jarak yang sama di antara setiap flex item.
  • space-around: Flex item akan diposisikan dengan jarak yang sama di antara setiap flex item, termasuk di awal dan akhir flex container.
  • stretch: Flex item akan diregangkan untuk mengisi ruang kosong pada sumbu cross-axis.