Flexbox nədir?

Flexbox (Flexible Box Layout) CSS moduludur və mürəkkəb və adaptiv düzənlər yaratmaq üçün nəzərdə tutulmuşdur. O, konteyner elementləri arasında yerləşdirmə, hizalama və boşluğun bölüşdürülməsini idarə etməyə imkan verir, hətta onların ölçüləri məlum olmayan və ya dinamik olsa belə.

Flexbox-un əsas anlayışları:

• Əsas ox (main axis): Elementlərin yerləşdirildiyi ox. Standart olaraq üfüqi (soldan sağa).
• Kross ox (cross axis): Əsas oxa perpendikulyar olan ox. Standart olaraq şaquli (yuxarıdan aşağıya).
• Konteyner (flex container): Flexbox xüsusiyyətlərinin tətbiq olunduğu element (display: flex və ya display: inline-flex).
• Elementlər (flex items): Konteynerin uşaqları.

Flex konteyner üçün xüsusiyyətlər:

• display: flex və ya inline-flex
• flex-direction: Əsas oxun istiqamətini müəyyən edir (row, row-reverse, column, column-reverse)
• flex-wrap: Elementlərin yeni sətirdə keçib-keçməyəcəyini müəyyən edir (nowrap, wrap, wrap-reverse)
• justify-content: Elementlərin əsas ox boyunca hizalanması (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: Elementlərin kross ox boyunca hizalanması (flex-start, flex-end, center, baseline, stretch)
• align-content: Bir neçə sətir və ya sütunun kross ox boyunca hizalanması (flex-start, flex-end, center, space-between, space-around, stretch)

Flex elementlər üçün xüsusiyyətlər:

• order: Elementin konteynerdəki sırasını müəyyən edir
• flex-grow: Elementin mövcud boşluğu necə dolduracağını müəyyən edir
• flex-shrink: Əgər yer kifayət etməzsə, elementin necə kiçiləcəyini müəyyən edir
• flex-basis: Elementin başlanğıc ölçüsünü müəyyən edir
• flex: flex-grow, flex-shrink və flex-basis üçün qısa yoldur
• align-self: Elementin kross ox boyunca hizalanmasını dəyişdirir (flex-start, flex-end, center, baseline, stretch, auto)

İstifadə nümunəsi:

/* Konteyner */
.container {
  display: flex; /* Flexbox aktivləşdirilir */
  flex-direction: row; /* Xətt üzrə düzən */
  justify-content: center; /* Üfüqi mərkəzləşdirmə */
  align-items: center; /* Şaquli mərkəzləşdirmə */
  height: 200px; /* Konteynerin hündürlüyü */
  border: 1px solid black;
}

/* Elementlər */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox, ənənəvi metodlara nisbətən (float, inline-block, table) daha asan və çevik layoutlar yaratmağa imkan verir.