Flexbox'ın kullanışlı, işlevsel ve öğrenmesi kolay bir css biçimlendirme tekniği olduğundan bashsettiğim dünden beri 2 günde flexbox kullanımı ile ilgili gerekli tüm bilgileri ve özellikleri paylaştığımı düşünüyorum ve bu özellikleri bir araya getirip kullanarak bir blog/haber sitesi haberler bölümü kodlayarak flexbox ile ilgili kapsamlı bir örnek de hazırlamış olmak istedim.
Hazırlayacağımız tasarım şu şekilde olacak:
- Her bir haber container'ını üst ve alt olarak iki bölüm olarak düşüneceğiz, dolayısıyla display:flex olan üst div'in flex-direction özelliği column olacak
- Haber görseli solda, başlığı ve kısa açıklaması da sağda olacak, bu alan için de display: flex olan flexbox flex-direction özelliği row olacak
- Alanları birbirinden ayırmak için arka plan renkleri ekleyerek yazıların da okunabilmesi için beyaz olmasını sağlayalım.
İlgili kodlar:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Flexbox Direction Reitix</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
- <!-- <meta http-equiv="refresh" content="2" > -->
-
- <style>
- .haberler{display: flex;flex-direction: column;margin: 10px;border: 1px solid black; background-color: cadetblue;}
- .haber{display: flex;flex-direction: row;}
- .haber-gorsel{width: 100px;height: 100px;margin: 10px;background-color: indigo;}
- h2, .aciklama, .haber-alt{color: #ffffff;}
- .haber-alt {align-self: flex-end;}
- </style>
- </head>
- <body>
- <div class="haberler">
- <div class="haber">
- <div class="haber-gorsel"></div>
- <div class="haber-icerik">
- <h2>Haber Başlığı</h1>
- <div class="aciklama">
- Buraya habere ait kısa açıklama gelebilir
- </div>
- </div>
- </div>
- <div class="haber-alt">
- Haberle ilgili detayları okumak için <a>tıklayın</a>.
- </div>
- </div>
-
- </body>
- </html>