Flex Item CSS: Cara Membuat dan Contoh Codenya

Section Artikel

1 Elemen Anak (Item)
2 Properti order
3 Properti flex-grow
4 Properti flex-shrink
5 Properti berbasis fleksibel
6 Properti flex
7 Properti align-self

Elemen Anak (Item)

Elemen turunan langsung dari kontainer flex secara otomatis menjadi item fleksibel (flex).

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

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

<p>Semua turunan langsung dari kontainer flex menjadi item flex.</p>

</body>
</html>

Berikut ini merupakan properti item flex :

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Properti order

Properti order menentukan urutan item flex.

Item flex pertama dalam kode tidak harus muncul sebagai item pertama di layout.

Nilai order harus berupa angka, nilai default adalah 0.

Contoh
Properti order dapat mengubah urutan item flex:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The order Property</h1>

<p>Gunakan properti order untuk mengurutkan item flex sesuai dengan yang kita mau:</p>

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

</body>
</html>

Properti flex-grow

Properti flex-grow berfungsi untuk menentukan seberapa banyak item flex akan berkembang relatif terhadap item flex lainnya.

Nilainya harus berupa angka, nilai defaultnya adalah 0.

Contoh
Buat item flex ketiga tumbuh delapan kali lebih cepat dari item flex lainnya:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-grow Property</h1>

<p>Buat item flex ketiga tumbuh delapan kali lebih cepat dari item flex lainnya:</p>

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

Properti flex-shrink

Properti flex-shrink berfungsi untuk menentukan seberapa banyak item flex akan menyusut relatif terhadap item flex lainnya.

Nilainya harus berupa angka, nilai defaultnya adalah 1.

Contoh
Jangan biarkan item flex ketiga menyusut sebanyak item flex lainnya:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-shrink Property</h1>

<p>Jangan biarkan item flex ketiga menyusut sebanyak item flex lainnya:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

Properti berbasis fleksibel

Properti flex-basis berfungsi untuk menentukan panjang awal item flex.

Contoh
Setel panjang awal item flex ketiga menjadi 200 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-basis Property</h1>

<p>Setel panjang awal item flex ketiga menjadi 200 piksel:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Properti flex

Properti flex adalah properti singkatan untuk properti flex-grow, flex-shrink, dan flex-basis.

Contoh
Buat item flex ketiga tidak bisa dikembangkan(growable) (0), tidak menyusut(shrinkable) (0), dan dengan panjang awal 200 piksel:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex Property</h1>

<p>Buat item flex ketiga tidak bisa dikembangkan(growable) (0), tidak menyusut(shrinkable) (0), dan dengan panjang awal 200 piksel:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Properti align-self

Properti align-self berfungsi untuk menentukan perataan untuk item yang dipilih di dalam kontainer flex.

Properti align-self menimpa perataan default yang ditetapkan oleh properti align-items di dalam kontainer.

Dalam contoh ini, kita akan gunakan kontainer tinggi 200 piksel, untuk lebih mendemonstrasikan properti align-self:

Contoh
Sejajarkan item flex ketiga di tengah wadah:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>The "align-self: center;" menyelaraskan item flex yang dipilih di tengah kontainer:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Contoh
Sejajarkan item flex kedua di bagian atas container, dan item flex ketiga di bagian bawah container:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-self Property</h1>

<p>  "align-self: flex-start;" menyelaraskan item flex yang dipilih di bagian atas container. </p>
<p>  "align-self: flex-end;" menyelaraskan item flex yang dipilih di bagian bawah container. </p>

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

CSS flex