Understanding Flexbox CSS

Flexbox waa hab fudud oo awood badan oo lagu maareeyo qaybaha layout-ka ee bogga HTML. Flexbox wuxuu ku siinayaa habab ka wanaagsan CSS-ka dhaqanka ah si aad u xakameyso qaabka iyo boosaska qaybahooda kala duwan. Waxaa si gaar ah loogu talagalay in lagu xaliyo dhibaatooyinka layout-ka, sida xaraynta qaybaha tooska ama jiifta iyo ku buuxinta booska bannaan si habsami leh.

 Understanding Flexbox CSS

Qaabka Flexbox loo isticmaalo

Si aad u isticmaasho Flexbox, waxa aad u baahan tahay inaad u beddesho sanduuqa waalidka "flex container". Waxaad tan ku samayn kartaa adiga oo ku daraya display: flex; element-ka waalidka. Kadibna, dhammaan element-yada gudaha ah waxay noqon doonaan "flex items" oo si toos ah ayey u raaci doonaan shuruucda Flexbox.

css

.container {
  display: flex;
}

Marka aad tan sameyso, dhammaan element-yada carruurta waxay isku safi doonaan hal saf ama tiir.

1. Main Axis iyo Cross Axis

Flexbox wuxuu leeyahay laba axal: main axis iyo cross axis. Main axis waa jihada ay element-yadu raacayaan (ama jiif ama toos). Cross axis waa midka ka soo horjeeda. Waxaad ku xakameyn kartaa jihada element-yada adiga oo isticmaalaya flex-direction.

css

.container {
  display: flex;
  flex-direction: row; /* saf: default */
  /* ama */
  flex-direction: column; /* tiir */
}

2. Xarakaynta iyo Xarunta Qaybaha: justify-content iyo align-items

• justify-content waxaa loo isticmaalaa in lagu maareeyo xaraynta qaybaha flex ee main axis. Waxaad u isticmaali kartaa inaad qaybaha ka dhigto inay noqdaan bartamaha, dhamaadka bidix, midig, ama ku kala firdhaan booska bannaan.

css

.container {
  display: flex;
  justify-content: center; /* qaybaha oo la xariifiyo bartamaha */
}

• align-items waa mid la mid ah justify-content, laakiin waxa uu ku shaqeeyaa cross axis. Waxaad u isticmaali kartaa inaad xakameyso sida element-yadu ugu taagan yihiin cross axis.

css

.container {
  display: flex;
  align-items: center; /* qaybaha oo la toosiyo cross axis-ka */
}

3. Flex-grow, Flex-shrink, iyo Flex-basis

• flex-grow wuxuu xakameeyaa sida element-ku u kori karo si uu u buuxiyo booska bannaan.
• flex-shrink wuxuu u ogolaanayaa element-ku inuu yaraado marka booska uu yaraado.
• flex-basis wuxuu go’aamiyaa cabbirka aasaasiga ah ee element-ka kahor intaan la adeegsan wax kale oo Flexbox-ka ah.

css

.item {
  flex-grow: 1; /* Qaybtan ayaa koraysa oo buuxinaysa booska bannaanka */
}

4. Safarada badan iyo flex-wrap

Mararka qaarkood, qaybaha Flexbox-ka waxay ka weynaadaan booska ay heli karaan hal saf. flex-wrap waxay kuu ogolaaneysaa inaad qaybaha ku kala bixiso safarro kala duwan.

css

.container {
  display: flex;
  flex-wrap: wrap; /* Qaybaha ayaa ka gudbi kara safar kaliya */
}

Tusaale

Hoos waxaa ku yaal tusaale fudud oo Flexbox ah oo muujinaya sifooyinkaan:

html

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

css

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  background-color: lightblue;
  padding: 10px;
  flex-grow: 1;
}

Gabagabo

Flexbox waa hab waxtar leh oo lagu maareeyo qaybaha layout-ka boggaaga. Waxay kuu ogolaaneysaa inaad si fudud u maamusho jihada, xaraynta, iyo koritaanka qaybaha kala duwan si ay uga jawaabaan cabbirka iyo boosaska kala duwan ee shaashadda.