Cara menggunakan justify items css

The justify-items property is set on the grid container to give child elements (grid items) alignment in the inline direction.

For pages in English, inline direction is left to right and block direction is downward.

For this property to have any alignment effect, the grid items need available space around themselves in the inline direction.

Tip: To align grid items in block direction instead of inline direction, use align-items property.

Show demo ❯

Default value:legacyInherited:noAnimatable:no. Read about animatableVersion:CSS3JavaScript syntax:object.style.justifyItems="center" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Propertyjustify-items57.016.045.010.144.0

CSS Syntax

Property Values

ValueDescriptionPlay itlegacyDefault value. Grid items with justify-self value 'auto' only inherits grid container justify-items property value if it starts with 'legacy'. It exists to implement the legacy alignment behavior of HTML's 〈center〉 element and align attribute.Demo ❯normalDependant on layout context, but similar to 'stretch' for grid layoutDemo ❯stretchStretches to fill the grid cell if inline-size (width) is not set.Demo ❯startAlign items at the start in the inline directionDemo ❯leftAlign items to the leftDemo ❯centerAlign items to the centerDemo ❯endAlign items at the end in the inline directionDemo ❯rightAlign items to the rightDemo ❯overflow-alignment

'safe' sets alignment of the item to 'start' if the content overflows
'unsafe' keeps the alignment value regardless of wether or not the item content overflows

baseline alignmentThe element is aligned with the baseline of the parent.Demo ❯initialSets this property to its default value. Read about initialinheritInherits this property from its parent element. Read about inherit

More Examples

justify-items vs. justify-self

Alignment is set to 'center' from container, and 'right' on the grid item itself. Property value 'right' prevails:

#container {
display: grid;
justify-items: center;
}

.blue {
justify-self: right;
}

Try it Yourself »

justify-items on absolutely positioned grid items

Alignment is set to 'right' on absolutely positioned grid items:

#container {
  display: grid;
  position: relative;
  justify-items: right;
}

.blue {
position: absolute;
}

Try it Yourself »

writing-mode

With the writing-mode property value of the grid container element set to vertical-rl, the inline direction is downwards. The result is that the start of the container is moved from left side to top, and the end of the container is moved from right side to bottom:

#container {
justify-items: end;
writing-mode: vertical-rl;
}

Try it Yourself »

direction

With the direction property value of the grid container element set to 'rtl', the inline direction is right to left. The result is that the start of the container is moved from left side to right side, and the end of the container is moved from right side to left side:

Alignment mungkin merupakan aspek flexbox yang paling membingungkan. Modul flexbox layout memiliki beberapa properti alignment yang dapat digunakan untuk situasi yang berbeda, dan ketika Anda menggunakannya mungkin tidak memahami apa kegunaannya. Namun, jika Anda tahu apa yang harus diperhatikan, alignment bukanlah hal yang rumit seperti saat Anda pertama kali mencobanya. Tutorial ini akan membantu Anda memahami aligment pada flexbox dengan sempurna.

Kisah tentang Dua Sumbu

Flexbox akan menggunakan : main axis dan cross axis. Seperti namanya, kedua sumbu ini memiliki hubungan hirarkis, yaitu main axis lebih unggul daripada cross axis.

Cross axis selalu tegak lurus dengan main axis.

Hubungan hirarkis ini merupakan perbedaan utama antara flexbox dan CSS Grid Layout. Secara desain, CSS Grid memiliki dua sumbu non-hirarkis: sumbu baris dan kolom. Pencipta standar web bermaksud menggunakan CSS Grid sebagai model layout dua dimensi. Disisi lain, flexbox, memiliki satu sumbu primer dan satu sumbu sekunder, karena tujuannya adalah untuk menjadi model layout satu dimensi. Hal keren tentang flexbox adalah Anda dapat menentukan arah dari satu dimensi dengan mengatur letak main axis, sehingga Anda dapat membuat layout baris dan kolom sekaligus.

Supaya tidak bingung dengan properti pada alignment, perlu diingat bahwa ketika Anda menggunakan flexbox, Anda akan menggunakan model satu dimensi. Meskipun jika layout Anda terlihat seperti dua dimensi (yaitu baris dan kolom), item 'flex' hanya dapat digunakan dalam satu arah, yaitu di main axis. Anda dapat mengatur flex dalam satu arah dan menyelaraskan jarak antar item sepanjang cross axis.

Mulailah dengan Menentukan Main Axis

Arah dari main axis ditentukan oleh properti - ada empat value yang dapat digunakan:

```
      <div class="item item-3">3</div>
```
2 – arah main axis dari kiri ke kanan (pengaturan default)
```
      <div class="item item-3">3</div>
```
3 – arah main axis dari kanan ke kiri
```
      <div class="item item-3">3</div>
```
4 – arah main axis dari atas ke bawah
```
      <div class="item item-3">3</div>
```
5 – arah main axis dari bawah ke atas

Mari kita lihat bagaimana tampilan layout ini di browser. Saya akan menggunakan contoh HTML sederhana, hanya sembilan kotak yang ditumpuk satu sama lain:

<div class="container">

      <div class="item item-1">1</div>

      <div class="item item-2">2</div>

      <div class="item item-3">3</div>

      <div class="item item-4">4</div>

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

Div paling luar dengan class

      <div class="item item-3">3</div>

6 akan menjadi pembungkus flex dan div dibagian dalam dengan class

      <div class="item item-3">3</div>

7 akan menjadi item flex.

1. Dari Kiri ke Kanan: row

Seperti yang dibahas sebelumnya, arah default dari flex adalah

      <div class="item item-3">3</div>

8; jika Anda tidak set value apa pun, maka value ini yang akan digunakan. Pada contoh di bawah ini, saya menambahkan beberapa properti flexbox ke dalam class container. Beberapa properti flex diberikan untuk tujuan dekoratif:

      <div class="item item-1">1</div>

Ketika properti

      <div class="item item-3">3</div>

9 diisi

      <div class="item item-3">3</div>

8, main axis akan mangarah secara horizontal, dari kiri ke kanan. Hal ini merupakan arah dimana flex akan diletakkan. Cross axis akan mengarah secara tegak lurus, dari atas ke bawah, dan akan mengikuti arah dari item pembungkusnya.

2. Dari Kanan ke Kiri: row-reverse

Ketika flex-direction berisi value

1, posisi sumbu tetap sama, artinya main axis akan mengarah secara horizontal, dan cross axis secara vertikal. Namun, arah baris akan terbalik: dari kanan ke kiri sepanjang main axis.

      <div class="item item-1">1</div>

      <div class="item item-1">1</div>

Jika Anda perhatikan contoh di bawah ini, penomoran pada baris dimulai dari kanan ke kiri, tetapi item masih terbungkus secara vertikal ke bawah.

Jika Anda juga ingin membalik arah cross axis, Anda perlu menggunakan

2 pada properti

3. Berikut perbedaannya:

3. Dari Atas ke Bawah: column

Ketika

      <div class="item item-3">3</div>

9 diatur menjadi

5, main dan cross axis akan bertukar posisi. Main axis akan mengarah secara vertikal (dari atas ke bawah) dan cross axis akan mengarah secara horizontal (dari kiri ke kanan).

      <div class="item item-2">2</div>

<div class="container">

      <div class="item item-1">1</div>

Jika Anda perhatikan contoh di bawah ini, penomoran tidak diurutkan berdasarkan baris, tetapi berdasarkan kolom. Disinilah sifat satu dimensi dari flexbox terlihat dengan jelas. Item akan dibungkus hanya jika container diberi height dengan ukuran tetap.

4. Dari Bawah ke Atas: column-reverse

Saya harap Anda melihat perbedaan dalam contoh yang ada di tutorial ini. Ketika

      <div class="item item-3">3</div>

9 diatur menjadi

7, arah main axis tetap vertikal dan arah cross axis tetap horizontal, seperti yang kita lihat pada contoh sebelumnya. Namun, arah kolom dibalik sehingga arah main axis menjadi dari bawah ke atas.

      <div class="item item-2">2</div>

<div class="container">

      <div class="item item-1">1</div>

Seperti yang Anda lihat di bawah ini, penomoran item flex dimulai dari kiri bawah, lalu ke atas dan ke kanan.

Sekali lagi, untuk mengubah arah cross axis, Anda perlu mengubah

2 pada properti

Singkatan dari Flex-flow

Properti adalah singkatan dari

      <div class="item item-3">3</div>

9 dan

3. Misalnya, Anda dapat menggunakan:

yang sebenarnya adalah:

      <div class="item item-3">3</div>

Properti Penyelarasan dalam Flexbox

Penyelarasan (alignment) dalam flexbox dapat terjadi di sepanjang main dan cross axis.

Salah satu properti (

      <div class="item item-4">4</div>

3) merupakan milik main axis, sementara tiga properti lainnya (

      <div class="item item-4">4</div>

      <div class="item item-4">4</div>

      <div class="item item-4">4</div>

6) merupakan milik cross axis.

Seperti yang Anda duga, perilaku dari properti alignment akab bergantung pada properti flex-direction. Sebagai contoh,

      <div class="item item-4">4</div>

3 akan mengarahkan item secara horizontal jika

      <div class="item item-3">3</div>

9 adalah

      <div class="item item-3">3</div>

8 atau

1, dan akan mengarahkan item secara vertikal jika

      <div class="item item-3">3</div>

9 adalah

5 atau

7. Hal ini merupakan kelebihan dari flexible box (flexbox).

Alignment Sepanjang Main Axis

Properti akan menyelaraskan semua item flex yang berada di dalam container di sepanjang main axis. Hal ini dikarenakan browser menyisakan ruang yang cukup banyak setelah menghitung area yang diperlukan untuk semua item. Properti justify-content dapat memiliki lima value:

```
<div class="container">
```
04 - item flex diselaraskan ke arah main axis dimulai (pengaturan default)
```
<div class="container">
```
05 - item flex diselaraskan ke arah main axis berakhir
```
<div class="container">
```
06 - item flex diselaraskan di bagian tengah dari main axis
```
<div class="container">
```
07 - item flex diletakkan secara merata dalam main axis, dari flex-start sampai flex-end
```
<div class="container">
```
08 - item flex diletakkan secara merata dalam main axis, tetapi menyisakan setengah ruang kosong di setiap ujungnya

Untuk menggunakan

      <div class="item item-4">4</div>

3 dengan benar, Anda perlu memperhatikan arah sumbu. Misalnya,

<div class="container">

10aturan ini akan meletakkan item flex secara berdekatan ke arah main axis dimulai. Item flex akan mengarah dari kiri ketika flex-direction adalah

      <div class="item item-3">3</div>

8, akan mengarah dari kanan ketika

1, akan mengarah dari atas ketika

5, and akan mengarah dari bawah ketika

Beberapa contoh berikut menunjukkan perbedaan dalam menggunakan value di properti

      <div class="item item-4">4</div>

3 dan flex-direction dengan value

      <div class="item item-3">3</div>

Alignment Sepanjang Cross Axis

Sekarang mari kita naik ke level selanjutnya. Anda dapat menggunakan tiga properti CSS untuk menyelaraskan item sepanjang cross axis. Dua diantaranya (

      <div class="item item-4">4</div>

4 dan

      <div class="item item-4">4</div>

5) digunakan untuk alignment pada satu garis (single-line alignment), sementara

      <div class="item item-4">4</div>

6digunakan untuk alignment pada banyak garis (multi-line alignment).

Single-Line Alignment

Properti

      <div class="item item-4">4</div>

4 dan

      <div class="item item-4">4</div>

5 menentukan bagaimana peletakkan item flex sepanjang cross axis. Kenyataannya, dua properti tersebut melalukan hal yang sama, yang membedakannya adalah

      <div class="item item-4">4</div>

4 menyelaraskan semua item dalam container, sedangkan

      <div class="item item-4">4</div>

5 menerapkan penyelarasan untuk masing-masing item flex.

Berikut value yang dapat digunakan untuk kedua properti tersebut:

```
<div class="container">
```
24 - membuat properti align-self mewarisi value dari align-items (pengaturan default untuk align-self)
```
<div class="container">
```
04 - item flex diselaraskan ke arah cross axis dimulai
```
<div class="container">
```
05 - item flex diselaraskan ke arah cross axis berakhir
```
<div class="container">
```
06 - item flex diselaraskan di bagian tengah dari cross axis
```
<div class="container">
```
28 - item flex diselaraskan sesuai garis
```
<div class="container">
```
29 - item flex akan direnggangkan sepanjang cross axis untuk mengisi ruang pada container (pengaturan default untuk align-items)

Contoh di bawah ini menunjukkan bagaimana properti

      <div class="item item-4">4</div>

4dan

      <div class="item item-4">4</div>

5 berperilaku ketika flex-direction adalah

      <div class="item item-3">3</div>

8. Cross axis secara default akan berjalan dari atas ke bawah. Masing-masing item memiliki jumlah padding yang berbeda sehingga dapat mengubah ketinggian dan baseline-nya. Seperti yang Anda lihat, misalnya, value

<div class="container">

04 akan menyelaraskan item flex ke arah cross axis dimulai, sementara

<div class="container">

05 akan menyelaraskannya ke arah sebaliknya.

Sebenarnya, ketika

      <div class="item item-3">3</div>

9 adalah

5 atau

7, tampilan akan berubah menjadi column-based layout sehingga properti

      <div class="item item-4">4</div>

4 dan

      <div class="item item-4">4</div>

5 akan menyelaraskan item secara horizontal sebagai gantinya.

Multi-Line Alignment

Properti memungkinkan penyelarasan multi-line sepangjang cross axis. Hal ini menentukan jarak antar item flex dalam banyak baris. Properti align-content tidak akan berpengaruh di container flex dalam satu baris (misalnya, ketika konten tidak dibungkus). Properti ini memiliki enam value yang berbeda:

```
<div class="container">
```
04 - item flex diselaraskan ke arah cross axis dimulai
```
<div class="container">
```
05 - item flex diselaraskan ke arah cross axis berakhir
```
<div class="container">
```
06 - item flex diselaraskan di bagian tengah dari cross axis
```
<div class="container">
```
07 - item flex diletakkan secara merata dalam cross axis, dari flex-start sampai flex-end
```
<div class="container">
```
08 - item flex diletakkan secara merata dalam cross axis, tetapi menyisakan setengah ruang kosong di setiap ujungnya
```
<div class="container">
```
29 - item flex akan direnggangkan sepanjang cross axis untuk mengisi ruang pada container (pengaturan default)

Beberapa contoh berikut menunjukkan perbedaan dalam menggunakan value di properti

      <div class="item item-4">4</div>

6. Seperti demo sebelumnya, default axis sudah diterapkan.

Dua contoh sebelumnya tidak memiliki properti single-line (

      <div class="item item-4">4</div>

4) yang ditentukan, jadi semua item akan direntangkan secara default. Dalam contoh berikut ini, kita akan mengatur

<div class="container">

48 sehingga item akan diselaraskan ke arah cross axis dimulai, tetapi kita akan mengatur

<div class="container">

49 sehingga konten dapat sejajar dengan ujung sumbu:

Jika Anda telah memahami semua yang telah dilalui dalam tutorial ini, you’ve done very well! Anda sekarang memiliki pemahaman dasar yang kuat mnegenai flexbox alignment.

Justify

justify-content digunakan untuk mensejajarkan item-item diantara flexbox agar container dari flexbox tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.

Apa itu Flex item pada CSS?

Flex (flexibel) adalah salah satu super power display dari CSS3. Memungkinkan untuk pengaturan layout, posisi dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis. Oleh sebab itu, nilai ini dinamakan Flex diambil dari kata flexibel yang berarti mudah diatur, disesuaikan dan ditukar-tukar.

Flex direction untuk apa?

Nama properti ini adalah flex-direction, digunakan untuk mengatur arah Main Axis. Nilai default dari flex-direction adalah row, yang artinya Main Axis kita berada di sumbu horizontal, bergerak dari kiri ke kanan.

Apa itu space

Space-between: letak item akan didistribusikan secara merata, item pertama ada pada bagian start dan item terakhir pada bagian end. Space-around: letak item akan didistribusikan secara merata dengan space/ruang yang ada diantara item.