Esnek Elemanlar

CSS ile birlikte esnek elemanlar tanımlanabilir. Bunun için öncelikle bir eleman esnek elemanları taşıyacak kutu olarak tanımlanmalıdır. Bunu yapmak için eleman display: inline-flex ya da display: flex şeklinde biçimlendirilmelidir. Bu özelliklerden ilki kutuyu satır içi seviyesinde bir eleman olarak görüntületirken diğeri blok seviyesinde bir esnek eleman tanımlamaya yarar. Daha sonra esnek elemanlar bu kutunun içerisine yerleştirilmelidir.


flex-direction

Bu özellik esnek elemanları kapsayan kutu için kullanılır ve esnek elemanların kutu içerisindeki dizilimleri belirlenir. Varsayılan değer olan row elemanların soldan sağa sıralanmasını sağlar. row-reverse değeri kullanıldığında elemanlar yine yatay olarak sıralanır fakat bu sefer sağdan sola doğru bir sıralama yapılır. column değeri kullanıldığında elemanlar dikey olarak yukarıdan aşağıya doğru sıralanır. column-reverse değerinde de elemanlar dikey olarak sıralanır fakat bu sefer sıralama aşağıdan yukarıya doğru olur. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-direction özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-direction şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
div.row{
flex-direction: row;
-moz-flex-direction: row;
-webkit-flex-direction: row;
}
div.rowreverse{
flex-direction: row-reverse;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
}
div.column{
flex-direction: column;
-moz-flex-direction: column;
-webkit-flex-direction: column;
}
div.columnreverse{
flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
}
p{
background-color: yellow;
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div class="row">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="rowreverse">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="column">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="columnreverse">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
</body>
</html>

flex-wrap

Esnek elemanları kapsayan kutu için kullanılan bu özellikle elemanların gerektiğinde alt satıra geçip geçemeyecekleri belirlenir. Varsayılan özellik olan nowrap kullanıldığında tüm elemanlar tek satıra yerleştirilir. wrap değeri kullanılırsa esnek elemanlar gerektiğinde alt satıra geçer. wrap-reverse değeri kullanıldığında elemanlar gerektiğinde üst satıra geçer. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-wrap özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-wrap şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
div.nowrap{
flex-wrap: nowrap;
-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
}
div.wrap{
flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
div.wrapreverse{
flex-wrap: wrap-reverse;
-moz-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
width: 212px;
}
p{
background-color: yellow;
border: 1px solid red;
margin: 2px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
    <div class="nowrap">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="wrap">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="wrapreverse">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
</body>
</html>

flex-flow

Bu özellikle flex-direction ve flex-wrap özelliklerinin ikisi birden biçimlendirilebilir ve kullanım formatı şu şekildedir.

flex-flow: "flex-direction değeri" "flex-wrap değeri"

Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-flow özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-flow şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


flex-basis

Bu özellik ile esnek elemanların boyutları belirtilir. Esnek elemanları içeren kutuyla değil esnek elemanlarla kullanılır. Bu özelliğin karşısına değer olarak uzunluk girilmelidir. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-basis özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-basis şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
background-color: aqua;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
}
p.ornek2{
background-color: yellow;
flex-basis: 120px;
-moz-flex-basis: 120px;
-webkit-flex-basis: 120px;
}
p.ornek3{
background-color: lime;
flex-basis: 70px;
-moz-flex-basis: 70px;
-webkit-flex-basis: 70px;
}
p.ornek4{
background-color: aqua;
flex-basis: 100px;
-moz-flex-basis: 100px;
-webkit-flex-basis: 100px;
}
p.ornek5{
background-color: yellow;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
}
p.ornek6{
background-color: lime;
flex-basis: 30px;
-moz-flex-basis: 30px;
-webkit-flex-basis: 30px;
}
div{
display: flex;
border: 1px solid red;
width: 300px;
}
</style>
</head>
<body>
    <div>
        <p class="ornek1">A</p>
        <p class="ornek2">B</p>
        <p class="ornek3">C</p>
    </div>
    <br>
    <div>
        <p class="ornek4">A</p>
        <p class="ornek5">B</p>
        <p class="ornek6">C</p>
    </div>
</body>
</html>

flex-grow

Bu özellik ile esnek elemanların gerektiğinde genişleyebilmelerine olanak verilir. Bu özelliğin karşısına sayı girilir ve genişleme esnasında her eleman bu özellikle belirtilen sayıyla orantılı olarak genişler. Varsayılan değer olan 0 esnek elemanın genişletilemeyeceği manasına gelir. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-grow özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-grow şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
background-color: aqua;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
flex-grow: 1;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
}
p.ornek2{
background-color: yellow;
flex-basis: 100px;
-moz-flex-basis: 100px;
-webkit-flex-basis: 100px;
flex-grow: 2;
-moz-flex-grow: 2;
-webkit-flex-grow: 2;
}
p.ornek3{
background-color: lime;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
flex-grow: 1;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
}
p.ornek4{
background-color: aqua;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
flex-grow: 1;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
}
p.ornek5{
background-color: yellow;
flex-basis: 100px;
-moz-flex-basis: 100px;
-webkit-flex-basis: 100px;
flex-grow: 3;
-moz-flex-grow: 3;
-webkit-flex-grow: 3;
}
p.ornek6{
background-color: lime;
flex-basis: 50px;
-moz-flex-basis: 50px;
-webkit-flex-basis: 50px;
flex-grow: 1;
-moz-flex-grow: 1;
-webkit-flex-grow: 1;
}
div{
display: flex;
border: 1px solid red;
width: 100%;
}
</style>
</head>
<body>
    <div>
        <p class="ornek1">A</p>
        <p class="ornek2">B</p>
        <p class="ornek3">C</p>
    </div>
    <br>
    <div>
        <p class="ornek4">A</p>
        <p class="ornek5">B</p>
        <p class="ornek6">C</p>
    </div>
</body>
</html>

Yukarıdaki örnekte iki esnek eleman kutusunun içerisindeki esnek elemanlar farklı oranlarda büyüyeceklerdir. Pencere küçültülürse esnek elemanlar da küçülerek normalde belirtilen boyutlarına yaklaşacaktır. Küçültmeler sonucunda esnek elemanlar normal boyutlarına ulaştıklarında daha fazla küçülmeyeceklerdir.


flex-shrink

Bu özellik ile esnek elemanların gerektiğinde daralabilmelerine olanak verilir. Bu özelliğin karşısına sayı girilir ve daralma esnasında her eleman bu özellikle belirtilen sayıyla orantılı olarak daralır. Varsayılan değer olan 0 esnek elemanın daraltılamayacağı manasına gelir. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex-shrink özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex-shrink şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
background-color: aqua;
flex-basis: 150px;
-moz-flex-basis: 150px;
-webkit-flex-basis: 150px;
flex-shrink: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
}
p.ornek2{
background-color: yellow;
flex-basis: 300px;
-moz-flex-basis: 300px;
-webkit-flex-basis: 300px;
flex-shrink: 2;
-moz-flex-shrink: 2;
-webkit-flex-shrink: 2;
}
p.ornek3{
background-color: lime;
flex-basis: 150px;
-moz-flex-basis: 150px;
-webkit-flex-basis: 150px;
flex-shrink: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
}
p.ornek4{
background-color: aqua;
flex-basis: 150px;
-moz-flex-basis: 150px;
-webkit-flex-basis: 150px;
flex-shrink: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
}
p.ornek5{
background-color: yellow;
flex-basis: 300px;
-moz-flex-basis: 300px;
-webkit-flex-basis: 300px;
flex-shrink: 3;
-moz-flex-shrink: 3;
-webkit-flex-shrink: 3;
}
p.ornek6{
background-color: lime;
flex-basis: 150px;
-moz-flex-basis: 150px;
-webkit-flex-basis: 150px;
flex-shrink: 1;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
}
div{
display: flex;
border: 1px solid red;
width: 100%;
}
</style>
</head>
<body>
    <div>
        <p class="ornek1">A</p>
        <p class="ornek2">B</p>
        <p class="ornek3">C</p>
    </div>
    <br>
    <div>
        <p class="ornek4">A</p>
        <p class="ornek5">B</p>
        <p class="ornek6">C</p>
    </div>
</body>
</html>

Yukarıdaki örnekte iki esnek eleman kutusunun içerisindeki esnek elemanlar pencere küçültüldüğünde farklı oranlarda küçüleceklerdir. Pencere tekrar yavaş yavaş büyütülürse esnek elemanlar da büyüyerek normalde belirtilen boyutlarına yaklaşacaktır. Büyütmeler sonucunda esnek elemanlar normal boyutlarına ulaştıklarında daha fazla büyümeyeceklerdir.


flex

Bu özellik tek seferde flex-basis, flex-grow ve flex-shrink özelliklerini biçimlendirmeye yarar ve kullanım kalıbı şu şekildedir:

flex: "flex-grow değeri" "flex-shrink değeri" "flex-basis değeri"

Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-flex özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-flex şeklindeki bir versiyonu kullanılmalıdır. Internet Explorer'ın eski sürümleri için de -ms-flex özelliği desteklenmektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


order

Normalde esnek elemanlar kendisini içeren kutu içerisinde yazıldığı sırayla gösterilir. Fakat order özelliği kullanılarak her esnek elemana bir sıra verilebilir. Bu durumda esnek elemanlar buradaki sıraya göre sıralanırlar. Bu özelliğin karşısına değer olarak sayı girilmelidir. Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-order özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-order şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
p.ornek1{
order: 1;
-moz-order: 1;
-webkit-order: 1;
}
p.ornek2{
order: 3;
-moz-order: 3;
-webkit-order: 3;
}
p.ornek3{
order: 2;
-moz-order: 2;
-webkit-order: 2;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
}
p{
background-color: yellow;
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div>
        <p class="ornek1">Örnek Paragraf 1</p>
        <p class="ornek2">Örnek Paragraf 2</p>
        <p class="ornek3">Örnek Paragraf 3</p>
    </div>
</body>
</html>

justify-content

Bu özellik ile esnek elemanların içinde bulundukları kutu içinde ana eksen boyunca nasıl dağıtılacağı belirlenebilir. Varsayılan değer olan flex-start elemanların kutunun başlangıcına yığılmasını sağlar. flex-end değeri kullanılacak olursa elemanlar kutunun sonuna yığılır. center değeri ile esnek elemanlar kutunun merkezine yerleştirilir. space-between değeri kullanılırsa ilk eleman kutunun başına, son eleman kutunun sonuna yaslanır, diğer elemanlar ise aralara boşluk konarak eşit şekilde kutuya dağıtılır. space-around değeri de benzerdir fakat bu durumda ilk elemandan önce ve son elemandan sonra da boşluk bırakılır.

Bu özellik Mozilla'nın eski sürümlerinde desteklenmemektedir. Bunun yerine -moz-justify-content özelliği desteklenmektedir. Aynı şekilde Chrome'un eski sürümleri ve Safari de bu özelliği yalın haliyle desteklememektedir. Bu nedenle bunlar için de -webkit-justify-content şeklindeki bir versiyonu kullanılmalıdır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
div.flex-start{
justify-content: flex-start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
}
div.flex-end{
justify-content: flex-end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
}
div.center{
justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
}
div.space-between{
justify-content: space-between;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
}
div.space-around{
justify-content: space-around;
-moz-justify-content: space-around;
-webkit-justify-content: space-around;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
}
p{
background-color: yellow;
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div class="flex-start">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="flex-end">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="center">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="space-between">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="space-around">
        <p>Örnek Paragraf 1</p>
        <p>Örnek Paragraf 2</p>
        <p>Örnek Paragraf 3</p>
    </div>
</body>
</html>

align-items

Bu özellik ile esnek elemanların içinde bulundukları kutu içinde ikincil eksen boyunca nasıl dağıtılacağı belirlenebilir. Varsayılan değer olan stretch esnek elemanların kutuyu dolduracak şekilde genişlemesini sağlar. flex-start değeri ise elemanların kutunun başlangıcına yığılmasını sağlar. flex-end değeri kullanılacak olursa elemanlar kutunun sonuna yığılır. center değeri ile esnek elemanlar kutunun merkezine yerleştirilir. baseline değeri kullanılırsa esnek elemanlar içeriklerinin alt kısımları aynı hizada olacak şekilde hizalanır.

Bu özellik Safari tarafından desteklenmemektedir. Bunun yerine -webkit-align-items özelliği desteklenmektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
div.stretch{
align-items: stretch;
-webkit-align-items: stretch;
}
div.flex-start{
align-items: flex-start;
-webkit-align-items: flex-start;
}
div.flex-end{
align-items: flex-end;
-webkit-align-items: flex-end;
}
div.center{
align-items: center;
-webkit-align-items: center;
}
div.baseline{
align-items: baseline;
-webkit-align-items: baseline;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
height: 100px;
}
p{
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div class="stretch">
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="flex-start">
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="flex-end">
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="center">
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="baseline">
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
</body>
</html>

align-self

Bu özellikle tek bir esnek elemanın esnek elemanları içeren kutu içerisindeki hizalaması ayarlanır. Hizalama ikincil eksene göre yapılır. Varsayılan değer auto'dur ve bu durumda esnek eleman kendisini içeren kutunun hizalamasına göre hizalanır. Kullanılabilecek diğer değerler align-items özelliğine girilebilecek değerlerle aynıdır ve bu değerlerin işlevleri de aynıdır.

Bu özellik Safari tarafından desteklenmemektedir. Bunun yerine -webkit-align-self özelliğini desteklemektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
p.stretch{
align-self: stretch;
-webkit-align-self: stretch;
}
p.flex-start{
align-self: flex-start;
-webkit-align-self: flex-start;
}
p.flex-end{
align-self: flex-end;
-webkit-align-self: flex-end;
}
p.center{
align-self: center;
-webkit-align-self: center;
}
p.baseline{
align-self: baseline;
-webkit-align-self: baseline;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
height: 100px;
}
p{
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div>
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p  class="stretch" style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div>
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p class="flex-start" style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div>
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p class="flex-end" style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div>
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p class="center" style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div>
        <p style="background-color:yellow; font-size: 2em">Örnek Paragraf 1</p>
        <p class="baseline" style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
</body>
</html>

align-content

Bu özellikle esnek elemanlar ikincil ekseni tamamen dolduramazsa yerleşimin nasıl olacağı belirlenir. Bu özellik tüm esnek elemanlar tek sıraya toplanmışsa çalışmaz. Varsayılan değer olan stretch kullanıldığında esnek elemanlar ikincil eksende tüm boşluğu dolduracak şekilde genişler.  flex-start değeri elemanların kutunun başlangıcına yığılmasını sağlar. flex-end değeri kullanılacak olursa elemanlar kutunun sonuna yığılır. center değeri ile esnek elemanlar kutunun merkezine yerleştirilir. space-between değeri kullanılırsa ilk eleman kutunun başına, son eleman kutunun sonuna yaslanır, diğer elemanlar ise aralara boşluk konarak eşit şekilde kutuya dağıtılır. space-around değeri de benzerdir fakat bu durumda ilk elemandan önce ve son elemandan sonra da boşluk bırakılır.

Bu özellik Safari tarafından desteklenmemektedir. Bunun yerine -webkit-align-content özelliği desteklenmektedir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Esnek Elemanlar</title>
<meta charset="UTF-8">
<style>
div.stretch{
align-content: stretch;
-webkit-align-content: stretch;
}
div.flex-start{
align-content: flex-start;
-webkit-align-content: flex-start;
}
div.flex-end{
align-content: flex-end;
-webkit-align-content: flex-end;
}
div.center{
align-content: center;
-webkit-align-content: center;
}
div.space-between{
align-content: space-between;
-webkit-align-content: space-between;
}
div.space-around{
align-content: space-around;
-webkit-align-content: space-around;
}
div{
display: flex;
background-color: gray;
border: 1px solid red;
height: 200px;
width: 200px;
flex-wrap: wrap;
}
p{
border: 1px solid red;
margin: 2px;
}
</style>
</head>
<body>
    <div class="stretch">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="flex-start">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="flex-end">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="center">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="space-between">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
    <br>
    <div class="space-around">
        <p style="background-color:yellow">Örnek Paragraf 1</p>
        <p style="background-color:lime">Örnek Paragraf 2</p>
        <p style="background-color:aqua">Örnek Paragraf 3</p>
    </div>
</body>
</html>



Fare İmleçleri <<<<< CSS3 >>>>> Dönüşümler

Fare İmleçleri

CSS kullanılarak fare imlecinin şekli değiştirilebilir. Bu biçimlendirme cursor özelliği ile yapılır. Hangi değerin neye yaradığı aşağıda gösterilmektedir.

auto: Varsayılan değerdir ve tarayıcının otomatik olarak imleç atamasına yarar.
crosshair: İmlecin artı şeklinde olmasını sağlar
zoom-in: İmleç büyütmeye yarayan bir büyüteç şeklini alır.
zoom-out: İmleç küçültmeye yarayan bir büyüteç şeklini alır.
e-resize: İmleç bir kutunun bir kenarı sağa hareket ettirilecekmiş gibi bir şekil alır.
w-resize: İmleç bir kutunun bir kenarı sola hareket ettirilecekmiş gibi bir şekil alır.
ew-resize: İmleç bir kutunun bir kenarı sağa ya da sola hareket ettirilecekmiş gibi bir şekil alır.
n-resize: İmleç bir kutunun bir kenarı yukarı hareket ettirilecekmiş gibi bir şekil alır.
s-resize: İmleç bir kutunun bir kenarı aşağı hareket ettirilecekmiş gibi bir şekil alır.
ns-resize: İmleç bir kutunun bir kenarı yukarı ya da aşağı hareket ettirilecekmiş gibi bir şekil alır.
ne-resize: İmleç bir kutunun bir kenarı sağa ve üste hareket ettirilecekmiş gibi bir şekil alır.
nw-resize: İmleç bir kutunun bir kenarı sola ve üste hareket ettirilecekmiş gibi bir şekil alır.
se-resize: İmleç bir kutunun bir kenarı sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
sw-resize: İmleç bir kutunun bir kenarı sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
nesw-resize: İmleç bir kutunun bir kenarı sağa ve üste ya da sola ve alta hareket ettirilecekmiş gibi bir şekil alır.
nwse-resize: İmleç bir kutunun bir kenarı sola ve üste ya da sağa ve alta hareket ettirilecekmiş gibi bir şekil alır.
col-resize: İmleç bir sütunun genişliği ayarlanacakmış gibi bir şekil alır.
row-resize: İmleç bir satırın yüksekliği ayarlanacakmış gibi bir şekil alır.
cell: İmleç hücre seçilecekmiş gibi bir şekil alır.
grab ve grabbing: İmleç eleman tutulabilirmiş gibi bir şekil alır.
default: Bilindik imleç şeklini ifade eder.
move: İmleç eleman hareket ettirilebilirmiş gibi bir şekil alır.
all-scroll: İmleç her yöne kaydırma yapılabilirmiş gibi bir şekil alır.
context-menu: İmleç açılır menü varmış gibi bir şekil alır.
text: İmleç yazı seçecekmiş gibi bir şekil alır.
vertical-text: İmleç dikey bir yazı seçecekmiş gibi bir şekil alır.
pointer: İmleç işaret parmağı görünümünü alır.
no-drop: İmleç tutulan bir elemanın bir yere bırakılamayacağını belirtecek bir şekil alır.
not-allowed: İmleç bir şeye izin verilmediğini belirtecek bir şekil alır.
none: İmlecin görünmemesini sağlar.
progress: İmleç programın çalıştığını ve meşgul olduğunu gösterir.
wait: İmleç programın meşgul olduğunu gösterir.
copy: İmleç bir şeyin kopyalanacağını belirtecek bir şekil alır.
alias: İmleç bir şeyin kopyasının oluşturulacağını belirtecek bir şekil alır.
help: İmleç bir şey hakkında yardım bilgisi olduğunu belirtecek bir şekil alır.

Bu değerlerin bazıları aynı imleç şekillerine sebep olmaktadır. Bu nedenle aşağıdaki örnekte sadece bir kısmının çalışması gösterilmiştir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fare İmleçleri</title>
<style>
span.auto:hover{
    cursor: auto;
}
span.crosshair:hover{
    cursor: crosshair;
}
span.zoom-in:hover{
    cursor: zoom-in;
}
span.zoom-out:hover{
    cursor: zoom-out;
}
span.e-resize:hover{
    cursor: e-resize;
}
span.s-resize:hover{
    cursor: s-resize;
}
span.ne-resize:hover{
    cursor: ne-resize;
}
span.nw-resize:hover{
    cursor: nw-resize;
}
span.col-resize:hover{
    cursor: col-resize;
}
span.row-resize:hover{
    cursor: row-resize;
}
span.cell:hover{
    cursor: cell;
}
span.move:hover{
    cursor: move;
}
span.none:hover{
    cursor: none;
}
span.progress:hover{
    cursor: progress;
}
span.wait:hover{
    cursor: wait;
}
span.copy:hover{
    cursor: copy;
}
span.alias:hover{
    cursor: alias;
}
span{
    width: 200px;
    height: 50px;
    background-color: yellow;
    display: inline-block;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <span class="auto">auto</span>
    <span class="crosshair">crosshair</span>
    <span class="zoom-in">zoom-in</span>
    <span class="zoom-out">zoom-out</span>
    <span class="e-resize">e-resize</span>
    <span class="s-resize">s-resize</span>
    <span class="ne-resize">ne-resize</span>
    <span class="nw-resize">nw-resize</span>
    <span class="col-resize">col-resize</span>
    <span class="row-resize">row-resize</span>
    <span class="cell">cell</p></span>
    <span class="move">move</p></span>
    <span class="none">none</p></span>
    <span class="progress">progress</span>
    <span class="wait">wait</span>
    <span class="copy">copy</span>
    <span class="alias">alias</span>
</body>
</html>

Değer olarak url("adres") formatında bir görsel adresi de girilebilir. Bu durumda imleç bu görseli kullanır. Böyle yapıldığında kesinlikle virgülle ayrıldıktan sonra standart değerlerden birisi de girilmelidir. Bu durumda görsel görüntülenemezse belirtilen şekil imleç olarak görüntülenir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Fare İmleçleri</title>
<style>
span.url:hover{
    cursor: url("liste.jpg"), auto;
}
span{
    width: 200px;
    height: 50px;
    background-color: yellow;
    display: inline-block;
    padding: 10px;
    margin: 20px;
}
</style>
</head>
<body>
    <span class="url">URL</span>
</body>
</html>



Sayaçlar ve content

CSS'te sayaçlar vasıtasıyla başlık numaralandırması yapılabilir. Bu doğrultuda kullanılan özellikler counter-reset ve counter-increment özellikleridir. Bu özelliklerle birlikte sıklıkla kullanılan bir başka özellik de content özelliğidir. Bu nedenle bu özelliğin de burada anlatılması uygun görülmüştür.

counter-reset

Bu özellik ile bir sayaç tanımlanır ve sayaca bir numara girilir. Numara girilmemesi durumunda sayaç sıfıra eşit olacaktır. Verilen seçiciye her erişildiğinde sayaç belirtilen değere eşitlenir. Bu özelliğin varsayılan değeri none değeridir ve hiçbir sayacın bir değere eşitlenmeyeceği manasına gelir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


counter-increment

Bu özelliğin karşısına önceden tanımlanmış bir sayaç ismi ve artış miktarı girilir. Artış miktarı girilmezse varsayılan değer olan 1 kullanılır. Bu özelliğin kullanıldığı seçiciye her erişildiğinde sayaç artış gösterir. Bu özellikle yapılan biçimlendirmeler de alt elemanlara aktarılmaz.


content

Bu özellik ile elemanların başına ya da sonuna içerik eklenebilir. Bir elemanın başına ya da sonuna yazı ekleme işlemi Sahte Eleman Seçicileri kısmında gösterilmiştir. Burada özellikle değinilmesi gereken nokta bu özellikle sayaç numaralarının da elemanların önüne ya da arkasına eklenebileceğidir. Bunu yapmak için content özelliği şu şekilde kullanılır:

content: counter(sayaç_ismi);

Hem sayaçları hem de content özelliğini içeren aşağıdaki örneği incelemek yararlı olacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
body{
counter-reset: baslik;
}
h1{
counter-increment: baslik;
counter-reset: altbaslik;
}
h2{
counter-increment: altbaslik;
}
h1::before{
content:counter(baslik)". ";
}
h2::before{
content:counter(baslik)"."counter(altbaslik)". ";
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1><br>
        <h2>Örnek Alt Başlık 1</h2><br>
        <h2>Örnek Alt Başlık 2</h2><br>
        <h2>Örnek Alt Başlık 3</h2><br>
    <h1>Örnek Başlık 2</h1><br>
        <h2>Örnek Alt Başlık 4</h2><br>
        <h2>Örnek Alt Başlık 5</h2><br>
        <h2>Örnek Alt Başlık 6</h2><br>
</body>
</html>

Yukarıdaki örnekte <body> elemanı içerisinde "baslik" isimli bir sayaç tanımlanmıştır. <h1> elemanlarıyla her karşılaşıldığında bu sayacın bir artması sağlanmıştır. Ayrıca <h1> elemanında "altbaslik" isimli bir sayaç tanımlanmıştır her <h1> elemanı ile karşılaşıldığında bu sayaç sıfırlanacaktır. <h2> elemanlarında ise bu sayacın artması sağlanmıştır. Daha sonra content özelliği ile başlık ve alt başlıklar numaralandırılmıştır. İlk <h1> elemanında "baslik" isimli sayaç 1'dir. Bu nedenle bu başlık 1 diye numaralandırılır. Daha sonra alt başlıklar olan <h2> elemanları bulunmaktadır. Bunlar da "altbaslik" isimli sayaç her seferinde artacağı için 1.1, 1.2 ve 1.3 diye numaralandırılır. İkinci <h1> elemanına ulaşıldığında "baslik" isimli sayaç yine artarak 2 olur, "altbaslik" isimli sayaç da sıfırlanır. İkinci ana başlık 2 diye numaralandırılacaktır. <h2> elemanlarında "altbaslik" isimli sayaç yine artış göstereceği için buradaki başlıklar da 2.1, 2.2 ve 2.3 olarak numaralandırılır.

content özelliğine girilebilecek değerlerden ikisi de open-quote ve close-quote değerleridir. Bu iki değer bir elemanda birlikte kullanılmalıdır. Bu değerler içeriğin başına ve sonuna tırnak işareti konmasını sağlar. Benzer şekilde kullanılan diğer iki değer de no-open-quote ve no-close-quote değerleridir. Bu değerler de elemanın başına ve sonuna tırnak işareti konmamasını sağlar.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:open-quote;
}
p::after{
content:close-quote;
}
p.noq::before{
content:no-open-quote;
}
p.noq::after{
content:no-close-quote;
}
</style>
</head>
<body>
    <p>Örnek Paragraf 1</p><br>
    <p>Örnek Paragraf 2</p><br>
    <p class="noq">Örnek Paragraf 3</p><br>
    <p>Örnek Paragraf 4</p><br>
</body>
</html>

Verilen örnekte paragrafların önüne ve sonuna tırnak işareti konur. Fakat "noq" diye sınıflandırılan paragraflarda tırnak olmayacaktır.

content özelliği ile bir elemanın başına ya da sonuna bir niteliğinin değeri de yerleştirilebilir. Bu durumda content özelliği şu şekilde kullanılmalıdır.

content: attr(nitelik);

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:attr(id);
}
</style>
</head>
<body>
    <p id="Örnek:">Örnek Paragraf</p>
</body>
</html>

content kullanılarak yapılabilecek bir başka ekleme de görsel gibi bir medyayı elemanın başına ya da sonuna eklemektir. Bu durumda content özelliği şu şekilde kullanılır:

content: url("medyanın_adresi")

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayaçlar ve content</title>
<meta charset="UTF-8">
<style>
p::before{
content:url("https://dl.dropboxusercontent.com/u/53524685/list_icon.png");
}
</style>
</head>
<body>
    <p>Örnek Paragraf 1</p><br>
    <p>Örnek Paragraf 2</p><br>
    <p>Örnek Paragraf 2</p><br>
</body>
</html>

Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.




Görüntüleme

display

Bu özellikle elemanların blok eleman ya da satır içi eleman gibi görüntülenmeleri sağlanır. inline değeri kullanılırsa eleman satır içi eleman gibi, block değeri kullanılırsa eleman blok eleman gibi görüntülenir. inline-block değeri kullanıldığında elemanın kendisi diğer elemanlara göre satır içi eleman gibi görüntülenir fakat elemanın içeriği blok gibi davranır. Örneğin bu değerle biçimlendirilen elemanlar satır içi eleman gibi davranmasına rağmen genişlik ve yüksekliğe sahip olabilir.

flex değeri ile blok seviyesinde bir esnek eleman kutusu elde edilirken, inline-flex değeri ile satır içi seviyesinde bir esnek eleman kutusu elde edilir. Esnek elemanlar ileriki konularda daha detaylı incelenecektir.

inline-table değeri kullanılırsa eleman satır içi tablo olarak görüntülenir. table-caption değeri <caption> elemanı gibi, table-column-group değeri <colgroup> elemanı  gibi, table-row-group değeri <tbody> elemanı gibi, table-header-group değeri <thead> elemanı gibi, table-footer-group değeri <tfoot> elemanı gibi, table-column değeri <col> elemanı gibi, table-row değeri <tr> elemanı gibi ve table-cell değeri <td> elemanı gibi görüntüleme yapmaya yarar. list-item değeri ile de liste elemanı gibi görüntüleme yapılabilir.

run-in değeri ile farklı durumlarda farklı görüntülenmeyle sonuçlanacak biçimlendirmeler yapılabilir. Eğer bu değerle biçimlendirilen eleman blok elemanı içeriyorsa bu eleman da blok gibi görüntülenir. run-in değeri ile biçimlendirilen eleman bir blok elemanından önce geliyorsa, eleman bu blok elemanının ilk satır içi elemanıymış gibi görüntülenir. Bu değerle biçimlendirilen elemandan sonra bir satır içi eleman geliyorsa eleman blok gibi gösterilir.

none değeri kullanılacak olursa eleman gösterilmez, sayfa akışında da herhangi bir yer kaplamaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
span.ornek{
display: block;
}
</style>
</head>
<body>
    <span>Span Elemanı 1</span>
    <span>Span Elemanı 2</span>
    <span class="ornek">Span Elemanı 3</span>
</body>
</html>

Normalde <span> elemanı satır içi eleman olduğu için ardı ardına gelen <span> elemanları yan yana görüntülenir. Fakat en alttaki <span> elemanı blok olarak görüntülenecek şekilde biçimlendirilmiştir. Bu nedenle o eleman diğerlerinin yanında değil yeni bir satırda görüntülenir.

Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.


visibility

Bu özellikle elemanın görünür olup olmaması ayarlanabilir. Varsayılan değer olan visible kullanıldığında eleman görünür olur. hidden değeri kullanıldığında eleman görünmez fakat sayfa akışında yer kaplamaya devam eder. Sadece tablo elemanlarında kullanılabilen collapse değeri kullanıldığında ise eleman görüntülenmez ve tablonun akışında yer de kaplamaz. Dahası tablonun toplam büyüklüğü de değişmez. Bu değer tablo elemanları dışında bir elemanda kullanılacak olursa hidden değerine eşdeğerdir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
p.visible{
visibility: visible;
}
p.hidden{
visibility: hidden;
}
tr.collapse{
visibility: collapse;
}
</style>
</head>
<body>
    <p class="visible">Örnek Paragraf 1</p>
    <p class="hidden">Örnek Paragraf 2</p>
    <table>
        <tr>
            <td>ABC</td>
            <td>DEF</td>
            <td>GHJ</td>
        </tr>
        <tr class="collapse">
            <td>ABC</td>
            <td>DEF</td>
            <td>GHJ</td>
        </tr>
        <tr>
            <td>ABC</td>
            <td>DEF</td>
            <td>GHJ</td>
        </tr>
    </table>
</body>
</html>

opacity

Bu özellik ile bir elemanın opaklığı ayarlanır. Değer olarak 0.0 ile 1.0 arasında bir sayı girilmelidir. 1.0 elemanın tamamen opak, 0.0 da elemanın tamamen şeffaf olacağını belirtir. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.

<!DOCTYPE html>
<html>
<head>
<title>CSS Görüntüleme</title>
<meta charset="UTF-8">
<style>
p.ornek1{
opacity: 0.1;
}
p.ornek2{
opacity: 0.4;
}
p.ornek3{
opacity: 0.7;
}
p.ornek4{
opacity: 1.0;
}
p{
background-color: blue;
}
</style>
</head>
<body>
    <p class="ornek1">Örnek Paragraf 1</p>
    <p class="ornek2">Örnek Paragraf 2</p>
    <p class="ornek3">Örnek Paragraf 3</p>
    <p class="ornek4">Örnek Paragraf 4</p>
</body>
</html>



Yaslama <<<<< CSS3 >>>>> Sayaçlar ve content

Yaslama

Normalde bir sayfada elemanlar alt alta sıralanırlar. Fakat yaslama yapılarak eleman sağa ya da sola yaslanıp diğer elemanların bu elemanın etrafından akması sağlanabilir. Yaslama işlemleri için float ve clear özellikleri kullanılır.


float

Bu özellikle elemanlar sağa ya da sola yaslanabilir. Bu özelliğin varsayılan değeri none değeridir ve herhangi bir yaslama işleminin yapılmayacağını belirtir. left değeri kullanılırsa eleman olabildiğince sol tarafa yaslanır. right değeri kullanıldığında da eleman olabildiğince sağ tarafa yaslanır. Bir eleman bir tarafa yaslandığında bir sonraki satır içi elemanlar onun yanına yerleştirilir. Eğer bir sonraki eleman blok elemanıysa ve float özelliği ile biçimlendirilmezse çakışmalar görülebilir. Bir önceki eleman yaslama işleminden etkilenmez. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


clear

Bu özellik elemanın bir önceki elemanın yaslanmış olmasından etkilenmemesini sağlar. Varsayılan değer olan none değeri elemanın iki tarafında da yaslanmış eleman olmasına izin verir. left değeri kullanılırsa elemanın solunda yaslanmış bir eleman bulunamaz. right değeri kullanıldığında ise elemanın sağında yaslanmış bir eleman bulunamaz. both değeri iki tarafta da yaslanmış eleman olmamasını sağlar. Bu özellikle yapılan biçimlendirmeler alt elemanları etkilemez.

<!DOCTYPE html>
<html>
<head>
<title>CSS Yaslama</title>
<meta charset="UTF-8">
<style>
p.floatleft{
float: left;
}
p.clearboth{
clear: both;
}
p{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
    <p class="floatleft">Örnek Paragraf 1</p>
    <p class="floatleft">Örnek Paragraf 2</p>
    <p class="floatleft">Örnek Paragraf 3</p>
    <p class="clearboth">Örnek Paragraf 4</p>
    <p class="floatleft">Örnek Paragraf 5</p>
</body>
</html>



Konumlandırma <<<<< CSS3 >>>>> Görüntüleme

Konumlandırma

position

Bu özellik ile elemanların konumlandırmasında kullanılacak referans belirlenir. Varsayılan değer static değeridir ve konumlandırmanın normal sayfa akışına göre yapılacağını belirtir. fixed değeri kullanıldığında eleman tarayıcı penceresine göre sabit bir noktaya konumlandırılır ve pencerede kaydırma yapılsa dahi eleman pencerenin aynı yerinde kalır. fixed değeri ile konumlandırılan elemanlar sayfanın normal akışından silinir ve diğer elemanlar sayfaya o eleman yokmuş gibi yerleştirilir. relative değeri girilirse eleman sayfa akışına göre olması gereken yere göre izafi olarak konumlandırılır. Böyle konumlandırılan elemanlar sayfa akışında normalde olması gereken yerdeymiş gibi değerlendirilir. absolute değeri ile de eleman sayfanın belirtilen bir yerine yerleştirilir. Sayfa akışında böyle konumlandırılan elemanlar da yok sayılır. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


left, right, bottom ve top

position özelliğinin karşısında static değeri olan elemanlar sayfa akışına göre konumlandırılır. Diğer değerlerle konumlandırılan elemanlar ise belli bir referansa göre konumlandırılır. Konumlandırma işlemi bu özelliklerle yapılır. left özelliği sol taraftaki, right özelliği sağ taraftaki, top özelliği üstteki ve bottom özelliği alttaki mesafeyi belirtir. Bu özelliklerin varsayılan değeri mesafeyi otomatik olarak belirlenmesini sağlayan auto değeridir. Belli bir mesafe belirtilmek istenirse uzunluk değeri girilmelidir. Bu özellikler ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: fixed;
left: 300px;
top: 10px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
    <p class="ornek">Fixed Paragraf</p>
    <div><br><br><br></div>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
</body>
</html>

Yukarıdaki örnekte fixed değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken fixed değeri ile konumlanmış paragraf tarayıcı penceresinde soldan 300px, üstten 10px kadarlık mesafeye konumlandırılacaktır. Kaydırma çubuklarıyla kaydırma yapıldığında dahi bu paragraf tarayıcı penceresinde aynı konumda kalacaktır.

<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: relative;
left: 20px;
top: 20px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
    <p>Örnek Paragraf</p><br>
    <p class="ornek">Relative Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
    <p>Örnek Paragraf</p><br>
</body>
</html>

Yukarıdaki örnekte de relative değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken relative değeri ile konumlanmış paragraf normalde olması gereken yere göre soldan ve üstten 20px kadarlık mesafede konumlandırılacaktır..

<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.ornek{
position: absolute;
left: 200px;
top: 200px;
color: blue;
}
p{
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
    <p>Örnek Paragraf</p>
    <p class="ornek">Absolute Paragraf</p>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
</body>
</html>

Yukarıdaki örnekte ise absolute değeri ile konumlandırılmış bir paragraf örnek olarak gösterilmiştir. Diğer paragraflar sayfanın akışına göre yerleştirilirken absolute değeri ile konumlanmış paragraf sayfada soldan ve üstten 200px kadarlık mesafeye konumlandırılacaktır. Kaydırma çubuklarıyla kaydırma yapıldığında bu eleman yine sayfadaki yerinde kalacaktır. Bunu denemek için pencereyi küçültüp kaydırma yapabilirsiniz.


clip

Bu özellik ile absolute değeri ile konumlandırılmış elemanlarda kırpma yapılabilir. Kırpma işlemi için bir dikdörtgen tanımlanır ve dikdörtgenin dışında kalan kısım görüntülenmez. Bu özellik şu kalıpla kullanılır:

clip: rect(y1,x1,y2,x2);

Bu kalıpta y1,x1 tanımlanan dikdörtgenin sağ üst köşesini y2,x2 tanımlanan dikdörtgenin sol alt köşesini belirtir. Dikdörtgenin referans aldığı nokta uygulandığı elemanın sol üst köşesidir.

<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
h1{
position: absolute;
left: 200px;
top: 200px;
clip: rect(0px,100px,100px,0px);
color: blue;
width: 200px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
    <h1>Örnek Paragraf</h1>
</body>
</html>

Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.


z-index

Bu özellikle static değeri dışındaki bir değerle konumlandırılmış elemanlara sıra verilebilir. Sıra tam sayı şeklinde olmalıdır. Negatif değerler de girilebilir. İki eleman çakıştığında sırası büyük olan diğerinin önünde görüntülenir. Alttaki örnekte sol tarafta fixed değeriyle konumlandırılan elemanın sırası, sağ tarafta ise absolute değeriyle konumlandırılan elemanın sırası diğerinden daha büyüktür. Kaydırma yapılarak elemanlar üst üste bindirildiğinde bu özelliğin çalışması görülebilir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Konumlandırma</title>
<meta charset="UTF-8">
<style>
p.fixedleft{
position: fixed;
left: 10px;
top: 10px;
background-color:pink;
z-index:1;
}
p.fixedright{
position: fixed;
right: 10px;
top: 10px;
background-color:pink;
z-index:-2
}
p.absoluteleft{
position: absolute;
left: 10px;
top: 200px;
background-color:lightblue;
z-index=0;
}
p.absoluteright{
position: absolute;
right: 10px;
top: 200px;
background-color:lightblue;
z-index:-1;
}
p{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
    <p class="fixedleft">Örnek Paragraf</p>
    <p class="fixedright">Örnek Paragraf</p>
    <p class="absoluteleft">Örnek Paragraf</p>
    <p class="absoluteright">Örnek Paragraf</p>
    <div><br><br><br><br><br>
         <br><br><br><br><br>
         <br><br><br><br><br>
         <br><br><br><br><br></div>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
    <p>Örnek Paragraf</p>
</body>
</html>



Sayfa Bölme <<<<< CSS3 >>>>> Yaslama

Sayfa Bölme

CSS'le sayfa bölme işlemlerinin nasıl yapılacağı üzerine biçimlendirmeler yapılabilir. Bu işlemler özellikle çıktı almaya yönelik biçimlendirmelerde yararlıdır. Aşağıdaki örneklerin çalışmasını görmek için kodun meydana getirdiği sayfayı yazdırmaya çalışıp önizlemesine bakılmalıdır.


page-break-inside

Bu özellik ile bir elemanın içinde bölünme yapılıp yapılamayacağı ayarlanır. Varsayılan değer auto değeridir ve sayfa bölünmelerinin otomatik olarak belirleneceğini belirtir. Kullanılabilecek bir diğer değer avoid değeridir ve bu değer bir eleman içinde bölünme olmasını mümkün olması durumunda engeller. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
page-break-inside: avoid;
width: 100px;
}
</style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>

Yukarıdaki örnek kodla oluşturulan sayfa yazdırılmaya çalışılırsa üç paragraf ayrı ayrı sayfalar da olacaktır. page-break-inside özelliğinin silinmesi durumunda paragrafların iki farklı sayfaya yayılabileceği görülecektir.


page-break-after

Bu özellik ile bir elemandan sonra sayfa bölünmesi yapılıp yapılmayacağı belirtilir. Varsayılan değer olan auto sayfanın otomatik olarak bölünmesini sağlar. avoid değeri kullanılırsa elemandan hemen sonra sayfa bölünmesi mümkünse engellenir. always seçeneği kullanıldığında elemandan hemen sonra her zaman sayfa bölünür. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
page-break-after: always;
width: 100px;
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <h1>Örnek Başlık 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <h1>Örnek Başlık 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>

Yukarıdaki örnek kodla oluşturulan sayfa yazdırılmaya çalışılırsa her paragraftan sonra başka bir sayfaya geçilecektir.


page-break-before

Bu özellik ile bir elemandan önce sayfa bölünmesi yapılıp yapılmayacağı belirtilir. Varsayılan değer olan auto sayfanın otomatik olarak bölünmesini sağlar. avoid değeri kullanılırsa elemandan hemen önce sayfa bölünmesi mümkünse engellenir. always seçeneği kullanıldığında elemandan hemen önce her zaman sayfa bölünür. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.

<!DOCTYPE html>
<html>
<head>
<title>CSS Sayfa Bölme</title>
<meta charset="UTF-8">
<style>
p{
width: 100px;
}
h1{
page-break-before: always;
}
</style>
</head>
<body>
    <h1>Örnek Başlık 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <h1>Örnek Başlık 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
    <h1>Örnek Başlık 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>



Sütunlar <<<<< CSS3 >>>>> Konumlandırma