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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex; /* çocuklar flex eleman olacak */
  width: 300px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}

Результат:

Задание 1