Sayfayı Yazdır - [CSS] Flex Nedir & Nasıl Kullanılır?

Başlık: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 01 Nisan 2021, 20:47:09

Öncelikle herkese merhaba, bu konuda sizlere Flex özelliğinin ne olduğunu ve nasıl kullanabileceğiniz anlatacağım.

Flexbox Türkçe anlamı: esnek kutu, bu özellik CSS de "display" özelliğinin değerini "flex" yapmanız ile kullanılabilir olmaya başlar, flexbox genel anlamıyla "float" ya da "position" özellikleri kullanmanıza ihtiyaç duymadan kolayca responsive tasarımlar yapmanıza imkan sağlar, peki bunu nasıl kullanacağız sadece "display: flex;" den mi ibaret dediğinizi duyar gibiyim, öyleyse hadi anlatıma geçelim!

Bir elementin içindekileri soldan sağa doğru dizmek istiyoruz:

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
}

css kodumuzda "flex-direction" değerini "row" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827222314507829308/unknown.png)

Bir elementin içindekileri üstten alta doğru dizmek istiyoruz:

Kod Seç

.classidelement {
	display: flex;
	flex-direction: column;
}

css kodumuzda "flex-direction" değerini "column" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://cdn.discordapp.com/attachments/755820048685334640/827223365965709396/unknown.png)

Şimdi sırada "align-items" özelliği var.

"flex-direction" özelliğimizin değerini "row" yaptık ve içindeki elementlerimizi dikey olarak hizalamak istiyoruz:

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

css kodumuzda "align-items" değerini "flex-start" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://cdn.discordapp.com/attachments/755820048685334640/827226129478713374/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

css kodumuzda "align-items" değerini "flex-end" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://cdn.discordapp.com/attachments/755820048685334640/827227337194995762/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	align-items: center;
}

css kodumuzda "align-items" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827227930744455208/unknown.png)

"flex-direction" özelliğimizin değerini "column" yaptık ve içindekileri elementlerimizi yatay olarak hizalamak istiyoruz:

Kod Seç

.classidelement {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

css kodumuzda "align-items" değerini "flex-start" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827229815534911488/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

css kodumuzda "align-items" değerini "flex-end" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://cdn.discordapp.com/attachments/755820048685334640/827230077380591636/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: column;
	align-items: center;
}

css kodumuzda "align-items" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://cdn.discordapp.com/attachments/755820048685334640/827230302983553064/unknown.png)

Şimdi sırada "justify-content" özelliğine geldik.
Not: Bu özellik sadece "flex-direction" özelliği "row" olan elementler de çalışır

"flex-direction" özelliğimizin değerini "row" yaptık ve içindekileri elementlerimizi yatay olarak hizalamak istiyoruz:

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	justify-content: center,
}

css kodumuzda "justify-content" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827232501809807380/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	justify-content: space-between,
}

css kodumuzda "justify-content" değerini "space-between" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827233467439644682/unknown.png)

(https://media.discordapp.net/attachments/755820048685334640/827234318610071622/unknown.png)

(https://cdn.discordapp.com/attachments/755820048685334640/827234491524186142/unknown.png)

Kod Seç

.classidelement {
	display: flex;
	flex-direction: row;
	justify-content: space-around,
}

css kodumuzda "justify-content" değerini "space-around" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

(https://media.discordapp.net/attachments/755820048685334640/827233659677442089/unknown.png)

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Efsun - 01 Nisan 2021, 20:53:18

Eline sağlık.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: S W E S T - 02 Nisan 2021, 07:59:31

Anlatım için teşekkürler güzel konu

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 02 Nisan 2021, 13:07:40

Alıntı yapılan: S W E S T - 02 Nisan 2021, 07:59:31

Anlatım için teşekkürler güzel konu

Alıntı yapılan: Efsun - 01 Nisan 2021, 20:53:18

Eline sağlık.

Rica ederim, işinize yaradıysa ne mutlu bana.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: laéx - 02 Nisan 2021, 13:15:13

Eline sağlık, paylaşım için teşekkürler.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Eamon - 02 Nisan 2021, 15:09:37

Alıntı yapılan: Volkan - 02 Nisan 2021, 13:15:13

Eline sağlık, paylaşım için teşekkürler.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Alien - 02 Nisan 2021, 15:28:21

Eline sağlık.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 02 Nisan 2021, 15:43:59

Alıntı yapılan: Volkan - 02 Nisan 2021, 13:15:13

Eline sağlık, paylaşım için teşekkürler.

Alıntı yapılan: Eamon - 02 Nisan 2021, 15:09:37

Alıntı yapılan: Volkan - 02 Nisan 2021, 13:15:13
Eline sağlık, paylaşım için teşekkürler.

Alıntı yapılan: xLoss - 02 Nisan 2021, 15:28:21

Eline sağlık.

İletileriniz ve zamanınızı ayırıp baktığınız için teşekkür ederim.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: DracDonix - 02 Nisan 2021, 17:51:36

kral qq

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 02 Nisan 2021, 20:42:06

Alıntı yapılan: DracDonix - 02 Nisan 2021, 17:51:36

kral qq

:cakal: :kro: :kral:

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: merddz - 02 Nisan 2021, 20:48:49

paylaşım için teşekkürler.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 02 Nisan 2021, 20:57:38

Alıntı yapılan: merddz - 02 Nisan 2021, 20:48:49

paylaşım için teşekkürler.

Paylaşım için rica iletin için teşekkür ederim :melek:

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Gaviria - 05 Nisan 2021, 14:45:10

kral

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Radless - 10 Nisan 2021, 17:16:52

Alıntı yapılan: Gaviria - 05 Nisan 2021, 14:45:10

kral

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Marcy - 20 Haziran 2021, 01:26:04

Teşekkürler.

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: sharax - 30 Ağustos 2021, 18:52:33

güzel gözüküyor

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Gladiator - 18 Eylül 2021, 10:38:01

Anlatım için teşekkürler. Faydalı içerik.:helal:

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: Impeccable - 19 Eylül 2021, 14:55:08

Elinize sağlık.:helal:

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: TAKTAK26 - 17 Mayıs 2024, 16:54:10

Eline sağlık. :)

Başlık: Ynt: [CSS] Flex Nedir & Nasıl Kullanılır?
Gönderen: laéx - 12 Haziran 2024, 01:22:47

Alıntı yapılan: TAKTAK26 - 17 Mayıs 2024, 16:54:10

Eline sağlık. :)

thnks. :kral: :P

GTAMulti - GTA Türkiye

PC ve Mobil Cihazlar => Yazılım => Web Tasarım => Konuyu başlatan: Radless - 01 Nisan 2021, 20:47:09