ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ፍሌክስ

የፍርግርግ አምዶችን አቀማመጥ፣ አሰላለፍ እና መጠን፣ አሰሳን፣ አካላትን እና ሌሎችንም ከሙሉ ምላሽ ሰጪ flexbox መገልገያዎች ጋር በፍጥነት ያስተዳድሩ። ለተጨማሪ ውስብስብ አተገባበር፣ ብጁ CSS አስፈላጊ ሊሆን ይችላል።

ተለዋዋጭ ባህሪያትን አንቃ

displayተጣጣፊ ሳጥን ለመፍጠር መገልገያዎችን ይተግብሩ እና ቀጥተኛ የልጆችን ንጥረ ነገሮች ወደ ተጣጣፊ እቃዎች ይለውጡ። ተጣጣፊ መያዣዎች እና እቃዎች ከተጨማሪ የመተጣጠፍ ባህሪያት የበለጠ ሊሻሻሉ ይችላሉ.

እኔ flexbox መያዣ ነኝ!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
እኔ የመስመር ውስጥ flexbox መያዣ ነኝ!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ .d-flexእና .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex
  • .d-xxl-flex
  • .d-xxl-inline-flex

አቅጣጫ

የመተጣጠፊያ ዕቃዎችን አቅጣጫ በተለዋዋጭ መያዣ ውስጥ ከአቅጣጫ መገልገያዎች ጋር ያዘጋጁ። በአብዛኛዎቹ ሁኔታዎች የአሳሽ ነባሪ ስለሆነ እዚህ አግድም ክፍልን መተው ይችላሉ row. ነገር ግን፣ ይህንን እሴት በግልፅ ለማዘጋጀት የሚያስፈልግዎ ሁኔታዎች (እንደ ምላሽ ሰጪ አቀማመጦች) ሊያጋጥሙዎት ይችላሉ።

.flex-rowአግድም አቅጣጫን ለማዘጋጀት (የአሳሹ ነባሪ) ወይም .flex-row-reverseአግድም አቅጣጫውን ከተቃራኒው ጎን ለመጀመር ይጠቀሙ ።

ተጣጣፊ ንጥል 1
ተጣጣፊ ንጥል 2
ተጣጣፊ ንጥል 3
ተጣጣፊ ንጥል 1
ተጣጣፊ ንጥል 2
ተጣጣፊ ንጥል 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-columnአቀባዊ አቅጣጫን ለማዘጋጀት ወይም .flex-column-reverseከተቃራኒው ጎን ወደ አቀባዊ አቅጣጫ ለመጀመር ይጠቀሙ ።

ተጣጣፊ ንጥል 1
ተጣጣፊ ንጥል 2
ተጣጣፊ ንጥል 3
ተጣጣፊ ንጥል 1
ተጣጣፊ ንጥል 2
ተጣጣፊ ንጥል 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

ይዘትን አረጋግጥ

በዋናው ዘንግ ላይ (የሚጀመርበት x-ዘንግ ፣ y-ዘንግ ከሆነ ) justify-contentላይ ያሉትን የተጣጣፊ ነገሮች አሰላለፍ ለመቀየር በፍሌክስቦክስ ኮንቴይነሮች ላይ መገልገያዎችን ይጠቀሙ ። ከ ( የአሳሽ ነባሪ ) ፣፣፣፣፣ ወይም flex-direction: columnይምረጡ ።startendcenterbetweenaroundevenly

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex justify-content-evenly">...</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

እቃዎችን አሰልፍ

align-itemsበመስቀል ዘንጉ ላይ ያሉትን የተጣጣፊ እቃዎች አሰላለፍ ለመቀየር በፍሌክስቦክስ ኮንቴይነሮች ላይ መገልገያዎችን ይጠቀሙ (የሚጀመርበት y-ዘንግ፣ x-ዘንግ ከሆነ flex-direction: column)። ከ start፣፣፣፣፣ endወይም (የአሳሽ ነባሪ) ይምረጡ ።centerbaselinestretch

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch
  • .align-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-stretch

እራስን አሰልፍ

align-selfበተሰቀለው ዘንግ ላይ ያለውን አሰላለፍ ለመቀየር በፍሌክስቦክስ ዕቃዎች ላይ መገልገያዎችን ይጠቀሙ (የ y-ዘንግ ለመጀመር ፣ x-ዘንግ ከሆነ flex-direction: column)። ከተመሳሳዩ አማራጮች ውስጥ ይምረጡ align-items፡ , start, end, centerወይም baseline( stretchየአሳሽ ነባሪ)።

ተጣጣፊ ንጥል
የተጣጣመ ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
የተጣጣመ ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
የተጣጣመ ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
የተጣጣመ ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
የተጣጣመ ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-stretch

ሙላ

.flex-fillሁሉንም የሚገኙትን አግድም ቦታዎች እየወሰዱ ከይዘታቸው ጋር እኩል የሆነ ስፋቶችን (ወይንም ይዘታቸው ከድንበር ሳጥኖቻቸው የማይበልጥ ከሆነ) ለማስገደድ ክፍሉን በተከታታይ የወንድም እህት ክፍሎች ላይ ይጠቀሙ ።

ተለዋዋጭ ንጥል ከብዙ ይዘት ጋር
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill
  • .flex-xxl-fill

ያድጉ እና ይቀንሱ

.flex-grow-*የተለዋዋጭ ንጥል ነገር ያለውን ቦታ ለመሙላት የማደግ ችሎታን ለመቀየር መገልገያዎችን ይጠቀሙ ። ከታች ባለው ምሳሌ፣ .flex-grow-1ንጥረ ነገሮቹ የሚችሉትን ሁሉንም ቦታ ይጠቀማሉ፣ የተቀሩትን ሁለት ተጣጣፊ እቃዎች አስፈላጊ ቦታቸውን ሲፈቅዱ።

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ሦስተኛው ተጣጣፊ ንጥል
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

.flex-shrink-*አስፈላጊ ከሆነ የመቀነስ ችሎታን ለመቀየር መገልገያዎችን ይጠቀሙ ። ከዚህ በታች ባለው ምሳሌ ፣ ሁለተኛው ተጣጣፊ ንጥል .flex-shrink-1ይዘቱን ወደ አዲስ መስመር ለመጠቅለል ይገደዳል ፣ ለቀድሞው ተጣጣፊ ንጥል ከ ጋር የበለጠ ቦታ ለመስጠት “እየቀነሰ” .w-100

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ flex-growእና flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

ራስ-ሰር ህዳጎች

የተለዋዋጭ አሰላለፍ ከራስ-ህዳጎች ጋር ሲቀላቀሉ Flexbox አንዳንድ በጣም ጥሩ ነገሮችን ሊያደርግ ይችላል። ከታች የሚታዩት ተጣጣፊ እቃዎችን በራስ-ሰር ህዳጎች የመቆጣጠር ሶስት ምሳሌዎች ናቸው፡ ነባሪ (ራስ-ሰር ህዳግ የለም)፣ ሁለት እቃዎችን ወደ ቀኝ ( .me-auto) መግፋት እና ሁለት እቃዎችን ወደ ግራ ( .ms-auto) መግፋት።

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

ከአሰላለፍ-ንጥሎች ጋር

በአቀባዊ አንድ ተጣጣፊ እቃ ወደ መያዣው የላይኛው ወይም የታችኛው ክፍል በማቀላቀል align-itemsflex-direction: columnእና margin-top: autoወይም ውሰድ margin-bottom: auto

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

መጠቅለል

ተጣጣፊ እቃዎች በተለዋዋጭ መያዣ ውስጥ እንዴት እንደሚታጠፉ ይቀይሩ. ከምንም አይነት መጠቅለያ ምረጥ (የአሳሹ ነባሪ) በ .flex-nowrap፣ በመጠቅለል .flex-wrapወይም በግልባጭ መጠቅለል .flex-wrap-reverse

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex flex-nowrap">
  ...
</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex flex-wrap">
  ...
</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex flex-wrap-reverse">
  ...
</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

ማዘዝ

የተወሰኑ ተጣጣፊ እቃዎችን የእይታ ቅደም ተከተል በጥቂት orderመገልገያዎች ይለውጡ ። እኛ አንድን ንጥል መጀመሪያ ወይም መጨረሻ ለመሥራት አማራጮችን ብቻ እና እንዲሁም የ DOM ትዕዛዝን ለመጠቀም ዳግም ማስጀመር ብቻ ነው የምናቀርበው። ማንኛውንም የኢንቲጀር ዋጋ ከ order0 ወደ 5 እንደሚወስድ፣ ለሚያስፈልጉ ተጨማሪ እሴቶች ብጁ CSS ያክሉ።

መጀመሪያ ተጣጣፊ ንጥል
ሁለተኛ ተጣጣፊ ንጥል
ሦስተኛው ተጣጣፊ ንጥል
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

በተጨማሪም ምላሽ ሰጪ .order-firstእና .order-lastክፍሎችም አሉ orderበማመልከት order: -1እና order: 6በቅደም ተከተል።

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

ይዘትን አሰልፍ

ተጣጣፊ እቃዎችን በመስቀለኛ ዘንግ ላይ አንድalign-content ላይ ለማጣመር በፍሌክስቦክስ ኮንቴይነሮች ላይ መገልገያዎችን ይጠቀሙ ። ከ ( የአሳሽ ነባሪ ) ፣፣፣፣፣ ወይም ይምረጡ ። እነዚህን መገልገያዎች ለማሳየት፣ የተለዋዋጭ እቃዎችን ብዛት አስገድደናል እና ጨምረናል።startendcenterbetweenaroundstretchflex-wrap: wrap

ቀና በል! ይህ ንብረት በነጠላ ረድፍ በተለዋዋጭ እቃዎች ላይ ምንም ተጽእኖ የለውም።

ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-end flex-wrap">...</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-center flex-wrap">...</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-between flex-wrap">...</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-around flex-wrap">...</div>
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
ተጣጣፊ ንጥል
<div class="d-flex align-content-stretch flex-wrap">...</div>

ምላሽ ሰጪ ልዩነቶችም አሉ ለ align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

የሚዲያ ነገር

የሚዲያ ነገር አካልን ከBootstrap 4 ለመድገም ይፈልጋሉ ? ከበፊቱ የበለጠ ተለዋዋጭነትን እና ማበጀትን በሚፈቅዱ ጥቂት ተጣጣፊ መገልገያዎች በአጭር ጊዜ ውስጥ እንደገና ይፍጠሩት።

Placeholder Image
ይህ ከሚዲያ አካል የተወሰነ ይዘት ነው። ይህንን በማንኛውም ይዘት መተካት እና እንደ አስፈላጊነቱ ማስተካከል ይችላሉ.
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

እና ከምስሉ ቀጥሎ ያለውን ይዘት በአቀባዊ መሃል ማድረግ ይፈልጋሉ ይበሉ፡

Placeholder Image
ይህ ከሚዲያ አካል የተወሰነ ይዘት ነው። ይህንን በማንኛውም ይዘት መተካት እና እንደ አስፈላጊነቱ ማስተካከል ይችላሉ.
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ሳስ

መገልገያዎች ኤፒአይ

የFlexbox መገልገያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scssየመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),