CSS Flex
Css flex; web sitelerinde ki karmaşık yapısını düzenleyip şekillendirme özelliğidir. Site içerisindeki elementleri dikey yatay olarak hizalamak ve kolay bir şekilde şekillendirmek için kullanılır. Flex özelliği sayesinde float kullanmadan sağa sola kaydırma işlemleri gerçeklestirilerek sitenin yapısının bozulması önlenmiştir.
1.Display:flex : Flexin kendi özelliklerini yapabilmesi için elementlerin görünüm özelliğini flex olarak belirtir.
<html lang="en">
<head>
<style>
.box{
height: 200px;
width: 600px;
background-color: black;
}
.container{
display: flex;
}
.item{
color:white;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box container">
<span class="item">Esma</span>
<span class="item">Esma</span>
<span class="item">Esma</span>
</div>
</body>
</html>Displayi flex, yüksekliği 200px, genişliği 600px, arka plan rengi ise siyah olan bir div tanımlası yapıp içerisine rengi beyaz, boyutu 30px olan spanlar koyar.
2.Justify-content : Flex özelliğine sahip olan bir kapsayıcının yatay eksende nasıl hizalanacağını ayarlar. Elementler başta mı, ortada mı, sonda mı, aralıklı mı dizileceğine karar vermemizi sağlar. Çeşitli kullanım şekilleri vardır;
- center ; Tam ortalı olarak hizalama yapar.
.container{
display: flex;
justify-content:center;
}Div içerisindeki elementleri yatay eksende tam ortada hizalar.
- space-evenly: Elementler arasında eşit boşluklar bırakarak hizalama yapar.
.container{
display: flex;
justify-content:space-evenly;
}Div içerisindeki spanlar arasında yatay eksende eşit boşluklar bırakarak hizalama yapar.
- space-around: Elementler arasında en başındaki ve sondaki boşluklar haricinde eşit boşluklar bırakarak hizalama yapar.
.container{
display: flex;
justify-content:space-around;
}Div içerisindeki spanlar arasında yatay eksende eşit boşluklar bırakarak hizalama yapar.
- space-between: İlk element başta, son element sonda olacak şekilde elementler kapsayıcısı içeresinde eşit boşluklar bırakarak hizalama yapar.
.container{
display: flex;
justify-content:space-between;
}Div içerisindeki ilk spanı başa son spanı ise sonda olacak şekilde yatay eksende eşit boşluklar bırakarak hizalama yapar.
- flex-start: Elementler kapsayıcının başından başlayarak dizilirler.
.container{
display: flex;
justify-content:flex-start;
}Div içerisindeki spanlar yatay eksenin başından başlayarak dizilirler.
- flex-end: Son element en sonda olacak sekilde dizilirlerç
.container{
display: flex;
justify-content:flex-end;
}Div içerisindeki spanlar yatay eksenin sonundan başlayarak dizilirler.
3.Align-items : Flex özelliğine sahip olan bir kapsayıcının dikey eksende nasıl hizalanacağını ayarlar. Elementler başta mı, ortada mı, sonda mı, aralıklı mı dizileceğine karar vermemizi sağlar. Çeşitli kullanım şekilleri vardır;
- center ; Tam ortalı olarak hizalama yapar.
.container{
display: flex;
align-items: center;
}Div içerisindeki elementleri dikey eksende tam ortada hizalar.
- flex-start: Elementler , kapsayıcının en üstünden başlayarak dizilirler.
.container{
display: flex;
align-items:flex-start;
}Div içerisindeki spanlar dikey eksenin başından başlayarak dizilirler.
- flex-end: Elementler, kapsayıcının en altından başlayarak dizilirler.
.container{
display: flex;
align-items:flex-end;
}Div içerisindeki spanlar dikeyeksenin sonundan başlayarak dizilirler.
4.Flex-direction: Elementlerin yönünü belirlemek için kullanılır. Default olarak yataya doğru tanımlanmıştır. Dolayısı ile aksi belirtilmediği sürece bu kapsayıcı içindeki tüm elementleri yan yana listeler.
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
.box{
height: 600px;
width: 600px;
border: 1px solid black;
}
.item1{
background-color: red ;
}
.item2{
background-color:yellow ;
}
.item3{
background-color: blue ;
}
.item4{
background-color: mediumvioletred ;
}
.item5{
background-color: greenyellow ;
}
.container{
display: flex;
}
</style>
</head>
<body>
<div class="container box">
<div class="box item1"></div>
<div class="box item2"></div>
<div class="box item3"></div>
<div class="box item4"> <div class="box item1"></div>
</div>
</body>
</html>Div içersinde 5 tane div tanımlaması yapılır ve bu divler default olarak soldan sağa doğru sıralanır.
Kullanım şekiller;
- row; Default değerdir, elementleri soldan sağa sıralar.
.container{
display: flex;
flex-direction: row;
}Div içerisindeki divler soldan sağa sıralanır.
- row-reverse; Elementleri sağdan sola doğru sıralar.
.container{
display: flex;
flex-direction: row-reverse;
}Div içerisindeki divler sağdan sola sıralanır.
- column: Elementleri yukarıdan aşağı doğru sıralar.
.container{
display: flex;
flex-direction: column;
}Div içerisindeki divler yukarıdan aşağı sıralanır.
- column-reverse; Elementleri aşağıdan yukarı doğru sıralar.
.container{
display: flex;
flex-direction: column-reverse;
}Div içerisindeki divler aşağıdan yukarı sıralanır.
5.Flex-wrap: Elementlerin aynı satıra sığması veya birden fazla satıra yaymak için bu özellik kullanılır. Default olarak bir satıra tüm elementleri sığdırır.
<html lang="en">
<head>
<style>
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
.box{
height: 600px;
width: 300px;
border: 1px solid black;
}
.item1{
background-color: red ;
}
.item2{
background-color:yellow ;
}
.item3{
background-color: blue ;
}
.item4{
background-color: mediumvioletred ;
}
.item5{
background-color: greenyellow ;
}
.container{
display: flex;
}
</style>
</head>
<body>
<div class="container box">
<div class="box item1"></div>
<div class="box item2"></div>
<div class="box item3"></div>
<div class="box item4"> <div class="box item1"></div>
</div>
</body>
</html>Div içersinde 5 tane div tanımlaması yapılır ve bu divler default olarak verilen kapsayıcının genişliğine sığacak şekilde eşit oranda küçülerek sıralanır.
Kullanım şekilleri;
- nowrap; Tüm elementleri tek bir satırda yan yana sığacak şekilde listeler. Default değerdir
.container{
display: flex;
flex-wrap: nowrap;
}Div içerisindeki elementleri yanyana sığdırır.
- wrap : Elementlerin sığmama durumunda birden fazla satırda yukarıdan aşağı doğru listelenir.
.container{
display: flex;
flex-wrap: wrap;
}Div içerisindeki divler sığmadığından aşağıya doğru listeler.
- wrap-reverse: Elementlerin sığmama durumunda birden fazla satırda aşağıdan yukarı doğru listelenir.
.container{
display: flex;
flex-wrap: wrap-reverse;
}Div içerisindeki divler sığmadığından yukarıya doğru listeler.
6.flex-flow: flex-direction ve flex-wrap özelliklerinin kısayoludur. Her ikisini tek bir özellikte tanımlayarak kullanmamızı sağlar.
.container {
flex-flow: column wrap;
}7.Items Flex Özellikleri:
- order: Elementlerin sıralanışını değiştirmek için kullanılır. Default olarak bir elementin orderı 0'dır. 1 yaparsak hepsinin önüne geçer -1 dersek hepsinin sonuna gider. Bu şekilde değerler verilebilir.
Order’dan önce;
.item1{
background-color: red ;
order:1;
}
.item2{
background-color:yellow ;
order:2;
}
.item5{
background-color: greenyellow ;
order:-1;
}5. div hepsinin önüne gelir diğerleri dizilir sonra 1. div gelir en sondada 2. div sıralanır.
Orderdan sonra;
- flex-grow: Bir elementin diğerlerine göre daha büyük göstermek için bu özelliği kullanıyoruz. Varsayılan değeri 0’dır.
.item1{
background-color: red ;
flex-grow:2;
}1.div diğerlerinin 2 katı olur.
