Articles
Pengenalan kepada CSS
Ciri-ciri CSS Berkaitan Flexbox

Ciri-ciri CSS Berkaitan Flexbox

Artikel ini menerangkan ciri-ciri CSS yang berkaitan dengan flexbox.

Anda boleh belajar cara menggunakan flexbox dan inline-flexbox.

YouTube Video

HTML untuk Pratonton

css-flex.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-flex.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>flex</h3>
 23            <section>
 24            <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.flex-container {
 27    display: flex;
 28    justify-content: space-between;
 29    align-items: center;
 30    background-color: lightblue;
 31    height: 100px;
 32}
 33
 34.flex-item {
 35    background-color: lightskyblue;
 36    padding: 10px;
 37    margin: 5px;
 38    width: 70px;
 39    height: auto;
 40}
 41</pre>
 42            <header><h4>HTML</h4></header>
 43<pre>
 44&lt;div class="flex-container"&gt;
 45    &lt;div class="flex-item"&gt;1&lt;/div&gt;
 46    &lt;div class="flex-item"&gt;2&lt;/div&gt;
 47    &lt;div class="flex-item"&gt;3&lt;/div&gt;
 48&lt;/div&gt;
 49</pre>
 50            <header><h4>HTML+CSS</h4></header>
 51            <section class="sample-view">
 52                <div class="flex-container">
 53                    <div class="flex-item">Item 1</div>
 54                    <div class="flex-item">Item 2</div>
 55                    <div class="flex-item">Item 3</div>
 56                </div>
 57            </section>
 58          </section>
 59        </article>
 60        <article>
 61          <h3>flex-direction</h3>
 62          <section>
 63            <header><h4>flex-direction: row</h4></header>
 64            <section class="sample-view">
 65                <div class="flex-container" style="flex-direction: row;">
 66                    <div class="flex-item">Item 1</div>
 67                    <div class="flex-item">Item 2</div>
 68                    <div class="flex-item">Item 3</div>
 69                </div>
 70            </section>
 71            <header><h4>flex-direction: row-reverse</h4></header>
 72            <section class="sample-view">
 73                <div class="flex-container" style="flex-direction: row-reverse;">
 74                    <div class="flex-item">Item 1</div>
 75                    <div class="flex-item">Item 2</div>
 76                    <div class="flex-item">Item 3</div>
 77                </div>
 78            </section>
 79            <header><h4>flex-direction: column</h4></header>
 80            <section class="sample-view">
 81                <div class="flex-container" style="flex-direction: column; height: 200px;">
 82                    <div class="flex-item">Item 1</div>
 83                    <div class="flex-item">Item 2</div>
 84                    <div class="flex-item">Item 3</div>
 85                </div>
 86            </section>
 87            <header><h4>flex-direction: column-reverse</h4></header>
 88            <section class="sample-view">
 89                <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
 90                    <div class="flex-item">Item 1</div>
 91                    <div class="flex-item">Item 2</div>
 92                    <div class="flex-item">Item 3</div>
 93                </div>
 94            </section>
 95          </section>
 96        </article>
 97        <article>
 98          <h3>justify-content</h3>
 99          <section>
100            <header><h4>justify-content: flex-start</h4></header>
101            <section class="sample-view">
102                <div class="flex-container" style="justify-content: flex-start;">
103                    <div class="flex-item">Item 1</div>
104                    <div class="flex-item">Item 2</div>
105                    <div class="flex-item">Item 3</div>
106                </div>
107            </section>
108            <header><h4>justify-content: flex-end</h4></header>
109            <section class="sample-view">
110                <div class="flex-container" style="justify-content: flex-end;">
111                    <div class="flex-item">Item 1</div>
112                    <div class="flex-item">Item 2</div>
113                    <div class="flex-item">Item 3</div>
114                </div>
115            </section>
116            <header><h4>justify-content: center</h4></header>
117            <section class="sample-view">
118                <div class="flex-container" style="justify-content: center;">
119                    <div class="flex-item">Item 1</div>
120                    <div class="flex-item">Item 2</div>
121                    <div class="flex-item">Item 3</div>
122                </div>
123            </section>
124            <header><h4>justify-content: space-between</h4></header>
125            <section class="sample-view">
126                <div class="flex-container" style="justify-content: space-between;">
127                    <div class="flex-item">Item 1</div>
128                    <div class="flex-item">Item 2</div>
129                    <div class="flex-item">Item 3</div>
130                </div>
131            </section>
132            <header><h4>justify-content: space-around</h4></header>
133            <section class="sample-view">
134                <div class="flex-container" style="justify-content: space-around;">
135                    <div class="flex-item">Item 1</div>
136                    <div class="flex-item">Item 2</div>
137                    <div class="flex-item">Item 3</div>
138                </div>
139            </section>
140          </section>
141        </article>
142        <article>
143          <h3>align-items</h3>
144          <section>
145            <header><h4>align-items: flex-start</h4></header>
146            <section class="sample-view">
147                <div class="flex-container" style="align-items: flex-start; height: 150px;">
148                    <div class="flex-item">Item 1</div>
149                    <div class="flex-item">Item 2</div>
150                    <div class="flex-item">Item 3</div>
151                </div>
152            </section>
153            <header><h4>align-items: center</h4></header>
154            <section class="sample-view">
155                <div class="flex-container" style="align-items: center; height: 150px;">
156                    <div class="flex-item">Item 1</div>
157                    <div class="flex-item">Item 2</div>
158                    <div class="flex-item">Item 3</div>
159                </div>
160            </section>
161            <header><h4>align-items: flex-end</h4></header>
162            <section class="sample-view">
163                <div class="flex-container" style="align-items: flex-end; height: 150px;">
164                    <div class="flex-item">Item 1</div>
165                    <div class="flex-item">Item 2</div>
166                    <div class="flex-item">Item 3</div>
167                </div>
168            </section>
169            <header><h4>align-items: stretch</h4></header>
170            <section class="sample-view">
171                <div class="flex-container" style="align-items: stretch; height: 150px;">
172                    <div class="flex-item">Item 1</div>
173                    <div class="flex-item">Item 2</div>
174                    <div class="flex-item">Item 3</div>
175                </div>
176            </section>
177            <header><h4>align-items: baseline</h4></header>
178            <section class="sample-view">
179                <div class="flex-container" style="align-items: baseline; height: 150px;">
180                    <div class="flex-item">Item 1</div>
181                    <div class="flex-item">Item 2</div>
182                    <div class="flex-item">Item 3</div>
183                </div>
184            </section>
185          </section>
186        </article>
187        <article>
188          <h3>flex-wrap</h3>
189          <section>
190            <header><h4>flex-wrap: nowrap</h4></header>
191            <section class="sample-view">
192                <div class="flex-container" style="flex-wrap: nowrap;">
193                    <div class="flex-item">Item 1</div>
194                    <div class="flex-item">Item 2</div>
195                    <div class="flex-item">Item 3</div>
196                    <div class="flex-item">Item 4</div>
197                    <div class="flex-item">Item 5</div>
198                    <div class="flex-item">Item 6</div>
199                    <div class="flex-item">Item 7</div>
200                    <div class="flex-item">Item 8</div>
201                    <div class="flex-item">Item 9</div>
202                </div>
203            </section>
204            <header><h4>flex-direction: wrap</h4></header>
205            <section class="sample-view">
206                <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207                    <div class="flex-item">Item 1</div>
208                    <div class="flex-item">Item 2</div>
209                    <div class="flex-item">Item 3</div>
210                    <div class="flex-item">Item 4</div>
211                    <div class="flex-item">Item 5</div>
212                    <div class="flex-item">Item 6</div>
213                    <div class="flex-item">Item 7</div>
214                    <div class="flex-item">Item 8</div>
215                    <div class="flex-item">Item 9</div>
216                </div>
217            </section>
218            <header><h4>flex-direction: wrap-reverse</h4></header>
219            <section class="sample-view">
220                <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221                    <div class="flex-item">Item 1</div>
222                    <div class="flex-item">Item 2</div>
223                    <div class="flex-item">Item 3</div>
224                    <div class="flex-item">Item 4</div>
225                    <div class="flex-item">Item 5</div>
226                    <div class="flex-item">Item 6</div>
227                    <div class="flex-item">Item 7</div>
228                    <div class="flex-item">Item 8</div>
229                    <div class="flex-item">Item 9</div>
230                </div>
231            </section>
232          </section>
233        </article>
234        <article>
235          <h3>flex-grow</h3>
236          <section>
237            <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240  flex-grow: 1;
241}
242
243.item2 {
244  flex-grow: 2;
245}
246
247.item3 {
248  flex-grow: 0;
249}</pre>
250            <header><h4>HTML+CSS</h4></header>
251            <section class="sample-view">
252                <div class="flex-container">
253                    <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254                    <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255                    <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256                </div>
257            </section>
258          </section>
259        </article>
260        <article>
261          <h3>flex-shrink</h3>
262          <section>
263            <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266  flex-shrink: 0;
267}
268.item2 {
269  flex-shrink: 1;
270}
271.item3 {
272  flex-shrink: 1;
273}</pre>
274            <header><h4>HTML+CSS</h4></header>
275            <section class="sample-view">
276                <div class="flex-container" style="width: 200px;">
277                    <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278                    <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279                    <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280                </div>
281            </section>
282          </section>
283        </article>
284        <article>
285          <h3>flex-basis</h3>
286          <section>
287            <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290  flex-basis: 100px;
291}
292.item2 {
293  flex-basis: 200px;
294}
295.item3 {
296  flex-basis: 25%;
297}</pre>
298            <header><h4>HTML+CSS</h4></header>
299            <section class="sample-view">
300                <div class="flex-container">
301                    <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302                    <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303                    <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304                </div>
305            </section>
306          </section>
307        </article>
308        <article>
309          <h3>align-self</h3>
310          <section>
311            <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314  align-self: flex-start;
315}
316.item2 {
317  align-self: center;
318}
319.item3 {
320  align-self: flex-end;
321}</pre>
322            <header><h4>HTML+CSS</h4></header>
323            <section class="sample-view">
324                <div class="flex-container" style="height: 150px;">
325                    <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326                    <div class="flex-item" style="align-self: center;">Item 2</div>
327                    <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328                </div>
329            </section>
330          </section>
331        </article>
332        <article>
333          <h3>order</h3>
334          <section>
335            <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338  order: 3;
339}
340
341.item2 {
342  order: 1;
343}
344
345.item3 {
346  order: 2;
347}</pre>
348            <header><h4>HTML+CSS</h4></header>
349            <section class="sample-view">
350                <div class="flex-container">
351                    <div class="flex-item" style="order: 3;">Item 1</div>
352                    <div class="flex-item" style="order: 1;">Item 2</div>
353                    <div class="flex-item" style="order: 2;">Item 3</div>
354                </div>
355            </section>
356          </section>
357        </article>
358        <article>
359            <h3>inline-flex</h3>
360            <section>
361                <header><h4>display: inline-flex</h4></header>
362                <section class="sample-view">
363                  Here is an example of inline-flex:
364                  <div class="inline-container">
365                      <div class="inline-item">1</div>
366                      <div class="inline-item">2</div>
367                      <div class="inline-item">3</div>
368                  </div>
369                  This text is in the same line as the inline-flex container.
370                </section>
371            </section>
372        </article>
373    </main>
374</body>
375</html>

Flexbox dan Inline Flexbox

flex 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    height: 100px;
 6}
 7
 8.flex-item {
 9    background-color: lightskyblue;
10    padding: 10px;
11    margin: 5px;
12    width: 70px;
13    height: auto;
14}

flex adalah sifat dalam CSS yang digunakan untuk menyusun dan menyelaraskan elemen dengan cekap, dan ia adalah sebahagian daripada sistem susun atur flexbox. Sistem ini terutamanya untuk menyelaraskan dan mengagihkan elemen anak (flex items) dalam bekas dengan mudah dan lebih fleksibel daripada float atau position tradisional.

  • Kelas flex-box menentukan sifat display sebagai flex untuk menggunakan susun atur flex.
  • Sifat justify-content dengan space-between meletakkan item di hujung kiri dan kanan sambil mengagihkan ruang secara sama rata di antara mereka.
  • Sifat align-items ditetapkan kepada center untuk menge-tengah-kan item secara menegak.

Struktur Asas Flexbox 

 1<div class="flex-container">
 2  <div class="flex-item">Item 1</div>
 3  <div class="flex-item">Item 2</div>
 4  <div class="flex-item">Item 3</div>
 5</div>
 6
 7<style>
 8.flex-container {
 9  display: flex;
10  /* Other flex properties */
11  flex-direction: row | row-reverse | column | column-reverse;
12  justify-content: flex-start | flex-end | center | space-between | space-around;
13  align-items: stretch | flex-start | flex-end | center | baseline;
14  flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17  /* Styles applied to individual items */
18  flex-grow: 0 | 1 | 2 | ...;
19  flex-shrink: 0 | 1;
20  flex-basis: auto | 10px | 25% | ...;
21  align-self: stretch | flex-start | flex-end | center | baseline;
22  order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>

Flexbox mempunyai dua komponen utama: bekas fleksibel (flex container) dan item fleksibel (flex items).

  1. Bekas fleksibel adalah elemen induk yang membungkus elemen anak, ditentukan menggunakan display: flex.
  2. Item fleksibel adalah elemen yang diletakkan di dalam bekas fleksibel, bermakna ia adalah anak langsung bekas tersebut.
Ciri-ciri Bekas Flex

Ciri-ciri berikut berkaitan dengan bekas flex.

  • Nyatakan flex dalam sifat display untuk menetapkan bekas flex. Elemen anak dalaman menjadi item flex.

  • Sifat flex-direction menentukan arah di mana item flex diletakkan. Nilai berikut boleh ditentukan:.

    • row: Menyusun secara mendatar dari kiri ke kanan. Ini adalah nilai lalai.
    • row-reverse: Menyelaraskan secara mendatar dari kanan ke kiri.
    • column: Menyelaraskan secara menegak dari atas ke bawah.
    • column-reverse: Menyelaraskan secara menegak dari bawah ke atas.

  • Sifat justify-content menentukan cara item flex diselaraskan secara mendatar (sepanjang paksi utama).

    • flex-start: Diselaraskan ke permulaan (kiri).
    • flex-end: Diselaraskan ke penghujung (kanan).
    • center: Diselaraskan di tengah.
    • space-between: Mengagihkan ruang secara sama rata antara item.
    • space-around: Mengagihkan ruang secara sama rata di sekitar item.

  • Sifat align-items menentukan cara item diselaraskan secara menegak (sepanjang paksi silang).

    • flex-start: Diselaraskan ke bahagian atas.
    • center: Diselaraskan secara menegak di tengah.
    • flex-end: Diselaraskan ke bahagian bawah.
    • stretch: Meregangkan untuk memenuhi ketinggian bekas.
    • baseline: Diselaraskan kepada garis asas teks.

  • Sifat flex-wrap menentukan sama ada item perlu membungkus jika melebihi lebar bekas.

    • nowrap: Tidak membungkus. Ini adalah nilai lalai.
    • wrap: Membungkus item.
    • wrap-reverse: Membungkus item dalam susunan terbalik.
Sifat-sifat Item Flex

Sifat-sifat berikut berkaitan dengan item flex.

  • Sifat flex-grow menentukan kadar pertumbuhan item. Semakin besar nilai, semakin banyak ruang yang ditempati oleh item berbanding item lain.

    • Jika 0, item tidak akan berkembang. Ini adalah nilai lalai.
    • Jika 1 atau lebih, kadar pertumbuhan ditentukan.

  • Sifat flex-shrink menentukan kadar pengecutan sesuatu item. Semakin besar nilainya, semakin banyak item itu akan mengecut.

    • Jika 1, item akan mengecut apabila ruang tidak mencukupi. Ini adalah nilai lalai.
    • Jika 0, item tidak akan mengecut.

  • Sifat flex-basis menentukan lebar atau tinggi awal bagi setiap item. Biasanya ia adalah saiz pada paksi utama. Nilai lalai ialah auto, yang berdasarkan saiz kandungan, tetapi anda boleh menetapkan nilai tetap dalam piksel atau peratusan.

  • Sifat align-self menentukan cara untuk menyelaraskan sesuatu item flex secara individu pada paksi silang. Ia boleh menggantikan nilai yang ditentukan oleh align-items.

  • Sifat order mengubah susunan paparan bagi item-item flex. Nilai lalai adalah 0, tetapi menetapkan nombor positif akan mengalihkannya ke kemudian dan nombor negatif mengalihkannya ke lebih awal.

Kelebihan Flexbox

Kelebihan flexbox termasuk perkara-perkara berikut:.

  • Susun atur fleksibel: Anda boleh mengawal penjajaran, jarak, dan arah elemen dengan fleksibel.
  • Ideal untuk reka bentuk responsif: Elemen anak akan menyesuaikan secara automatik mengikut saiz elemen induk.

inline-flex 

 1.inline-container {
 2    display: inline-flex;
 3    border: 2px solid #000;
 4    padding: 10px;
 5    justify-content: space-between;
 6    background-color: lightblue;
 7    width: 150px;
 8    height: 50px;
 9}
10.inline-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 20px;
15    height: auto;
16}

  • inline-flex ialah gaya susun atur dalam CSS yang membolehkan anda menyusun kandungan menggunakan flexbox sambil menyelaraskan elemen mengikut aliran sebaris. Ia berkelakuan serupa dengan display: flex, tetapi inline-flex menyebabkan elemen itu berkelakuan sebagai elemen sebaris.

  • Dalam contoh ini, sifat inline-flex diterapkan pada kelas container. Oleh itu, kelas container berfungsi sebagai elemen peringkat sebaris dalam elemen <div> induk. Pada masa yang sama, elemen-elemen dalam kelas item, yang merupakan elemen anak dalam kelas container, disusun mengikut peraturan flexbox. Dalam contoh ini, justify-content: space-between digunakan, jadi ruang diagihkan secara sama rata antara elemen-elemen anak.

Kes penggunaan inline-flex

inline-flex amat berguna dalam kes seperti berikut:.

  • Apabila anda ingin menggunakan susun atur fleksibel dengan elemen selari Ia berguna apabila anda perlu menggunakan flexbox untuk menyusun komponen UI kecil seperti butang atau ikon. Sebagai contoh, apabila anda ingin menyusun ikon dan teks bersebelahan serta meletakkannya di tengah.

  • Apabila membina susun atur kompleks sambil mengekalkan aliran selari Ia digunakan apabila anda ingin memanfaatkan keupayaan flexbox untuk menjadikan susun atur dalaman fleksibel sambil mengekalkannya sebagai elemen selari. Sebagai contoh, apabila anda ingin menyusun pelbagai elemen dalam baris yang sama dan melaraskan elemen anak di dalamnya.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Harta CSS Berkaitan Susun Atur