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

[Radless]

Ö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ç Expand

.classidelement {
display: flex;
flex-direction: row;
}
css kodumuzda "flex-direction" değerini "row" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

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

Kod Seç Expand

.classidelement {
display: flex;
flex-direction: column;
}
css kodumuzda "flex-direction" değerini "column" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

Ş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ç Expand

.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:

Kod Seç Expand

.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:

Kod Seç Expand

.classidelement {
display: flex;
flex-direction: row;
align-items: center;
}
css kodumuzda "align-items" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

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

Kod Seç Expand

.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:

Kod Seç Expand

.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:

Kod Seç Expand

.classidelement {
display: flex;
flex-direction: column;
align-items: center;
}
css kodumuzda "align-items" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

Ş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ç Expand

.classidelement {
display: flex;
flex-direction: row;
justify-content: center,
}
css kodumuzda "justify-content" değerini "center" yapıyoruz ve çıkan sonucumuz bu şekilde oluyor:

Kod Seç Expand

.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:

Kod Seç Expand

.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:

[Efsun]

Eline sağlık.

[S W E S T]

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

[Radless]

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

Eline sağlık.

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

[laéx]

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

[Eamon]

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

[Alien]

Eline sağlık.

[Radless]

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

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

Eline sağlık.

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

[DracDonix]

kral qq

[Radless]

kral qq

   

[merddz]

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

[Radless]

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

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

[Gaviria]

kral

[Radless]

kral

[Marcy]

Teşekkürler.