CSS Flexbox ile Etiket (tag) Sistemi

CSS Flexbox ile Etiket sistemine ait kodlar yazının devamında size sunulmaktadır. Kursun video haline erişmek için; https://www.udemy.com/course/css-flexbox-egitimi/?referralCode=DC4C2DE50DCA5FD330D3

// HTML CODE

0
<style>
1
.etiketler { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
2
<p> .etiketler li { padding: .2em .4em; margin: .2em .4em; background: rgba(255,0,0,0.6); color: #fff; border-radius: .3em; } </p>
3
</style>
4
5
 
6
<ul class="etiketler">
7
<li>Html kursu</li>
8
<li>css kursu</li>
9
<li>javascript kursu</li>
10
<li>linux kursu</li>
11
<li>udemy.com</li>
12
<li>google</li>
13
<li>ali osman</li>
14
<li>kahraman</li>
15
<li>Html kursu</li>
16
<li>css kursu</li>
17
<li>javascript kursu</li>
18
<li>linux kursu</li>
19
<li>udemy.com</li>
20
<li>google</li>
21
<li>ali osman</li>
22
<li>kahraman</li>
23
<li>Html kursu</li>
24
<li>css kursu</li>
25
<li>javascript kursu</li>
26
<li>linux kursu</li>
27
<li>udemy.com</li>
28
<li>google</li>
29
<li>ali osman</li>
30
<li>kahraman</li>
31
<li>Html kursu</li>
32
<li>css kursu</li>
33
<li>javascript kursu</li>
34
<li>linux kursu</li>
35
<li>udemy.com</li>
36
<li>google</li>
37
<li>ali osman</li>
38
<li>kahraman</li>
39
<li>Html kursu</li>
40
<li>css kursu</li>
41
<li>javascript kursu</li>
42
<li>linux kursu</li>
43
<li>udemy.com</li>
44
<li>google</li>
45
<li>ali osman</li>
46
<li>kahraman</li>
47
</ul>

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.