CSS3 Flexbox arşivleri - Murat Bilginer

CSS 3 Flexbox 8 – Items İçin Flex-Grow Özelliği

Murat Bilginer — Thu, 23 Nov 2023 08:25:19 +0000

Merhabalar. Bu yazımda Items için flex-grow özelliklerine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css...

The post CSS 3 Flexbox 8 – Items İçin Flex-Grow Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 7 – Items İçin Order Özelliği

Murat Bilginer — Thu, 23 Nov 2023 08:17:00 +0000

Merhabalar. Bu yazımda Items için order özelliğine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Bir önceki yazılarımda anlatılan flex özellikleri, kapsayıcıya aitti. Birde içindeki öğeler için esnek yapıda neler yapabiliyoruz, onlara bakalım. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css...

The post CSS 3 Flexbox 7 – Items İçin Order Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 6 – Flexbox Align-Self Özelliği

Murat Bilginer — Thu, 23 Nov 2023 07:30:55 +0000

Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakmaya devam ediyoruz. align-self özelliğine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css Şu anki güncellemelerimiz sonrası uygulama aşağıdaki gibi gözüküyor. align-self Özelliği align-self özelliği,...

The post CSS 3 Flexbox 6 – Flexbox Align-Self Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 5 – Flexbox Align-Content Özelliği

Murat Bilginer — Thu, 23 Nov 2023 07:12:18 +0000

Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakmaya devam ediyoruz. align-content özelliğine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css Şu anki güncellemelerimiz sonrası uygulama aşağıdaki gibi gözüküyor. align-content Özelliği align-content özelliği,...

The post CSS 3 Flexbox 5 – Flexbox Align-Content Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 4 – Flexbox Align-Items Özelliği

Murat Bilginer — Thu, 23 Nov 2023 06:45:48 +0000

Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakmaya devam ediyoruz. align-items özelliğine bakacağız. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. align-items Özelliği align-items özelliği, CSS Grid Layout modelinde veya Flexbox modelinde kullanılan bir özelliktir. Bu özellik, bir container içindeki öğelerin çapraz eksende (cross axis) nasıl hizalanacaklarını belirler. align-items...

The post CSS 3 Flexbox 4 – Flexbox Align-Items Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 3 – Flexbox Justify-Content Özelliği

Murat Bilginer — Thu, 23 Nov 2023 06:31:48 +0000

Merhabalar. Bu yazımda Flexbox’ın Container içindeki nesnelerin durumlarına bakacağız. İlk olarak justify-content özelliğine bakalım. Projemiz bir önceki yazımızdan devam ettiği için öncelikle o yazımı okumanızı tavsiye ederim. Burada bahsedeceğimiz özelliklerin nasıl gözüktüğünü daha iyi anlayabilmek için öncelikle kodlarımızda şu güncellemeleri yapalım. index.html flexbox.css Şu anki güncellemelerimiz sonrası uygulama aşağıdaki gibi gözüküyor. justify-content Özelliği “justify-content” özelliği,...

The post CSS 3 Flexbox 3 – Flexbox Justify-Content Özelliği appeared first on Murat Bilginer.

CSS 3 Flexbox 2 – Flexbox Container’ın Durumları

Murat Bilginer — Thu, 23 Nov 2023 05:07:55 +0000

Merhabalar. Bu yazımda Flexbox özelliklerini kullanırken ilk olarak Container ögesinin durumlarını ele alacağız. Flexbox özelliklerimizi bir örnek proje üzerinden görmeye başlayacağız. Başlangıç olarak Flexbox Tutorial isminde bir proje klasörü oluşturdum. İçinde index.html, flexbox.css, flexbox.js dosyalarımı oluşturdum. Başlangıç kodları olarak aşağıdaki kodları yazalım. index.html flexbox.js Javascript dosyasını container içindeki boxların renklerini randomize oluşturabilmek için yazdım. Zorunlu...

The post CSS 3 Flexbox 2 – Flexbox Container’ın Durumları appeared first on Murat Bilginer.

CSS 3 Flexbox 1 – FlexBox Nedir?

Murat Bilginer — Wed, 22 Nov 2023 16:20:41 +0000

Merhabalar. Bu eğitim yazı dizim boyunca CSS Flexbox modülünden bahsediyor olacağım. İlk yazımda genel olarak Flexbox nedir buna bakalım istedim. CSS Flexbox, yani esnek kutu modeli, web tasarımında düzen oluşturmak için kullanılan bir düzenleme teknolojisidir. Esnek kutu modeli, öğelerin bir konteynır içinde nasıl hizalandığını ve dağıtıldığını kontrol etmek için kullanılır. Temelde, bir kutu içindeki öğelerin...

The post CSS 3 Flexbox 1 – FlexBox Nedir? appeared first on Murat Bilginer.