Önceki yazı için bkz: CSS Flexbox align-self Özelliği Nedir ve Nasıl Kullanılır?
CSS ve Flexbox kullanarak hizalama seçeneklerini hem container, hem de container altındaki elemanlar için ayrı ayrı yapabilecek seviyeye geldik, şimdi de bu yazıda container altındaki elemanların kapladıkları alanları belirleyebildiğimiz (hacim katsayısı olarak düşünülebilir) flex-grow özelliğini göstermek isterim.
Flexbox özelliklerinden olan flex-grow özelliği, sayısal değerler alırlar ve aldıkları değerleri de ilgili alanlar için kaplayacakları alan katsayısı olarak kullanılmasını sağlarlar. Aşağıdaki gibi container için varsayılan flex-grow'u 1, 2. elemanı 2 ve 3. elemanı da 5 flex-grow değerleri ile belirlediğimizde aşağıdaki görseldeki gibi:
1: x
2: 2x
3: 5x
boyutlarında bir alan kaplayacak şekilde otomatik olarak ekran uzunluğuna göre boyutlandırılmış oluyor. Bence Bootstrap'teki col-12 uygulamasından daha pratik ve daha kullanışlı bir özellik olmasına rağmen insanlar halen flexbox'a karşı halen yeterince bilgi sahibi değiller.
Sayfanın html kodlarını da aşağıdaki gibi paylaşıyorum
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flexbox Direction Reitix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta http-equiv="refresh" content="2" >
<style>
.ust{background-color: indigo; display: flex; flex-direction: row; flex-wrap: nowrap;
justify-content: center; align-items: flex-start;}
.alt{background-color: hotpink; margin: 10px;padding: 10px;color: white;flex-grow: 1;}
.alt:nth-child(2) {flex-grow: 2;}
.alt:nth-child(3) {flex-grow: 5;}
</style>
</head>
<body>
<div class="ust">
<div class="alt">1</div>
<div class="alt">2</div>
<div class="alt">3</div>
</div>
</body>
</html>