CSS'te Flex Elemanlar
Öğrendiğimiz blok modeli türlerine ek olarak
bir tane daha var - flex elemanlar. Bu tür
elemanları elde etmek için, ebeveyn
öğesine display özelliği
flex değeriyle yazılmalıdır.
Ebeveynin kendisi blok eleman olarak kalacak,
ancak onun çocukları flex eleman haline gelecektir.
Flex elemanlar, blok elemanlar gibi genişliğe
ve yüksekliğe, margin ve padding
sahip olabilir. Ancak, blok elemanların aksine,
varsayılan olarak flex elemanlar ebeveynleri
içinde bir satıra dizilir.
Hadi deneyelim:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex; /* çocuklar flex eleman olacak */
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
:
