ምትዕፅፃፍ

ፍሌክስ ባህርያት ኣንቅሕ

ፍሌክስቦክስ displayመትሓዚ ንምፍጣርን ቀጥታዊ ህጻናት ባእታታት ናብ ፍሌክስ ነገራት ንምቕያርን ዩቲሊቲታት ተግባራዊ ምግባር። ፍሌክስ ኮንተይነራትን ኣቑሑትን ብተወሳኺ ፍሌክስ ባህርያት ብዝያዳ ክመሓየሹ ይኽእሉ።

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<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ንኣግማድ ኣንፈት ካብቲ ኣንጻር ወገን ንምጅማር ተጠቐም ።

<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ድማ ነቲ ቀጥታዊ ኣንፈት ካብቲ ኣንጻር ወገን ንምጅማር ተጠቐም።

<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

ትሕዝቶ ምምኽናይ

ኣብ ፍሌክስቦክስ ኮንተይነራት ዝርከቡ ዩቲሊቲታት ተጠቐም justify-contentንኣሰላልፋ ፍሌክስ ነገራት ኣብቲ ቀንዲ ኣክሲስ ንምቕያር (እቲ x-axis ንኽጅምር፣ y-axis እንተኾይኑ flex-direction: column). startካብ (ነባሪ መርበብ ሓበሬታ)፡ , end, center, between, aroundወይ ምረጽ evenly።

<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-axis ንኽጅምር፣ x-axis እንተኾይኑ flex-direction: column). startካብ , end, center, baseline, ወይ stretch(ነባሪ መርበብ ሓበሬታ) ምረጽ ።

<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-axis ንኽጅምር፣ x-axis እንተኾይኑ 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

ኣውቶ ማርጅን

ፍሌክስቦክስ ፍሌክስ ኣሰላልፋታት ምስ ኣውቶ ማርጅን ክትሓዋውሶ ከለኻ ገለ ጽቡቕ ዘደንቕ ነገራት ክገብር ይኽእል እዩ። ኣብ ታሕቲ ሰለስተ ኣብነታት ናይ ምቁጽጻር ፍሌክስ ነገራት ብመንገዲ ኣውቶ ማርጅን ተገሊጾም ኣለዉ፡ ነባሪ (ኣውቶ ማርጅን የለን)፡ ክልተ ነገራት ናብ የማን ( .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-items፣ flex-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 ትእዛዝ ንምጥቃም ዳግማይ ምትዕርራይ። ከምቲ orderዝኾነ ምሉእ ቁጽሪ ዋጋ ካብ 0 ክሳብ 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

ብተወሳኺ ውን responsive .order-firstand classes ኣለዉ ን ናይ ሓደ ባእታ ብቕደም ተኸተል ብምትግባር .order-lastዝቕይሩ , ብቕደም ተኸተል።orderorder: -1order: 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ኣብ ፍሌክስቦክስ ኮንተይነራት ዝርከቡ ዩቲሊቲታት ተጠቒምካ ፍሌክስ ነገራት ብሓባር ኣብ መስቀላዊ ኣክሲስ ኣሰላልፍ። startካብ (ነባሪ መርበብ ሓበሬታ)፡ , end, center, between, aroundወይ ምረጽ stretch። ነዞም ዩቲሊቲታት ንምግላጽ flex-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 ነቲ media object component ክትደግሞ ትደሊ ዲኻ? ካብቲ ቅድሚ ሕጂ ዝነበረ ንላዕሊ ተዓጻጻፍነትን ምምዕርራይን ዘፍቅዱ ውሑዳት ፍሌክስ ዩቲሊቲታት ኣብ ሓጺር ግዜ ዳግማይ ፍጠሮ።

<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>

ከምኡ’ውን ነቲ ትሕዝቶ ኣብ ጎኒ ምስሊ ብቐጥታ ከተማእከሎ ከም እትደሊ ንበል፤

<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>

ሳስ

ዩቲሊቲስ ኤፒኣይ

ፍሌክስቦክስ ዩቲሊቲስ ኣብ ዩቲሊቲስና ኤፒኣይ ኣብ 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,
      ),
    ),