CSS Flexbox ile Etiket (tag) Sistemi

tarihinde gönderilmiş tarafından

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>