CSS Academy · Pelajaran

Penggantian Perataan Item Flex dengan align-self

Ganti align-items milik container untuk item flex individual menggunakan align-self.

Pelajaran 1 dari 413 langkah

Penggantian Perataan Item Flex dengan align-self adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu align-self?

align-self mengesampingkan pengaturan align-items pada wadah flex untuk item flex tertentu. Properti ini berlaku pada item individual, bukan pada wadah.

Nilai align-self

Menerima nilai yang sama seperti align-items:

auto — mewarisi align-items dari wadah (bawaan)
flex-start — menyelaraskan ke awal sumbu silang
flex-end — menyelaraskan ke akhir sumbu silang
center — menengahkan pada sumbu silang
stretch — merentangkan hingga memenuhi ukuran sumbu silang
baseline — menyelaraskan garis dasar teks

Contoh Praktis

Sebuah navigasi yang sebagian besar itemnya berada di tengah, tetapi tombol terakhirnya diratakan ke bagian akhir:

<nav class="nav">
  <span>Logo</span>
  <a href="#">Link</a>
  <button class="cta-button">Sign Up</button>
</nav>

Merentangkan Satu Item

Buat satu kartu merentang hingga setinggi penuh, sementara kartu lainnya menyesuaikan ukurannya dengan konten:

<div class="sidebar-layout">
  <div>Content</div>
  <div class="ad-unit">Ad</div>
</div>

margin: auto sebagai Perataan

Margin otomatis pada item flex mendorong dirinya sendiri (atau elemen saudaranya) ke sisi berlawanan. Ini merupakan alternatif yang kuat untuk align-self dalam menengahkan atau membagi ruang.

<nav class="nav">
  <span class="logo">Logo</span>
  <a href="#">Home</a>
  <a href="#">About</a>
  <span class="settings">&#9881;</span>
</nav>

margin: auto untuk Menengahkan secara Vertikal

Margin otomatis juga berfungsi secara vertikal. margin-top: auto di dalam wadah flex berbentuk kolom mendorong elemen ke bagian bawah:

<div class="card">
  <p>Card body</p>
  <div class="card-footer">Footer</div>
</div>

Perataan Garis Dasar

Menyelaraskan item berdasarkan garis dasar teks menjaga hubungan yang mudah dibaca antara item dengan ukuran berbeda:

<div class="stats-row">
  <span class="big-number">42</span>
  <span class="label">users</span>
</div>

align-self: auto (Bawaan)

align-self: auto memberi tahu item untuk menggunakan nilai align-items dari wadah. Anda hanya perlu menetapkan align-self jika ingin menyimpang dari bawaan wadah.

Sumbu Silang vs Sumbu Utama

Ingat: align-self selalu bekerja pada sumbu silang. Jika flex-direction: column, sumbu silang bersifat horizontal, sehingga align-self mengatur posisi kiri/kanan.

Menggabungkan align-self dengan flex-grow

Pola yang umum: rentangkan item untuk mengisi ruang DAN ganti perataan silangnya:

<div class="features">
  <div class="feature-card">Feature A</div>
  <div>Feature B</div>
</div>

Perataan Grid vs Flexbox

CSS Grid memiliki align-self (sumbu baris) dan justify-self (sumbu kolom) untuk pengaturan 2D. align-self pada Flexbox hanya mengatur sumbu silang — gunakan margin: auto untuk sumbu utama.

Pemeriksaan Singkat

Sebuah wadah flex memiliki align-items: center. Salah satu item perlu diratakan ke bagian atas sumbu silang. Properti apa yang harus ditetapkan pada item tersebut?

Jawab di pelajaran interaktif

Ringkasan

align-self mengesampingkan align-items pada wadah flex untuk item individual. Gunakan untuk mengubah pola perataan pada elemen tertentu. margin: auto adalah alat pelengkap yang membagi ruang tersisa untuk mendorong item sepanjang salah satu sumbu.

Gratis untuk memulai

Belajar CSS dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 40
Pelajaran: 159

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penggantian Perataan Item Flex dengan align-self” gratis?

Ya — teks lengkap “Penggantian Perataan Item Flex dengan align-self” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Penggantian Perataan Item Flex dengan align-self”?

Ganti align-items milik container untuk item flex individual menggunakan align-self. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Penggantian Perataan Item Flex dengan align-self” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Penggantian Perataan Item Flex dengan align-self
Properti Order dan Pengurutan Visual
Pola Shorthand Flex
Tata Letak Flexbox Umum: Nav, Kartu, Objek Media

← Kembali ke CSS Academy