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