Source

ምትዕፅፃፍ

ኣቀማምጣ፣ ኣሰላልፋን ዓቐንን ናይ ሽቦ ዓምድታት፣ ምድህሳስ፣ ኣካላትን ካልእን ብሙሉእ ስብስብ ምላሽ ዝህቡ ፍሌክስቦክስ ዩቲሊቲታት ብቕልጡፍ ኣመሓድር። ንዝያዳ ዝተሓላለኹ ኣተገባብርኡ፡ ብሕታዊ CSS ኣድላዪ ክኸውን ይኽእል።

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

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

ኣነ ፍሌክስቦክስ ኮንተይነር እየ!
<div class="d-flex p-2">I'm a flexbox container!</div>
ኣነ ናይ ውሽጢ መስመር ፍሌክስቦክስ ኮንተይነር እየ!
<div class="d-inline-flex p-2">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

ኣንፈት

ኣንፈት ናይ ፍሌክስ ነገራት ኣብ ፍሌክስ መትሓዚ ምስ ኣንፈት ዩቲሊቲታት ኣቐምጥ። ኣብ መብዛሕትኡ እዋን ኣብዚ ነቲ ኣግማድ ክፍሊ ክትገድፎ ትኽእል ኢኻ ምኽንያቱ እቲ ናይ መርበብ ሓበሬታ ነባሪ row. ይኹን እምበር፡ ነዚ ዋጋ ብግልጺ ከተቐምጦ ዘድልየካ ኩነታት ከጋጥመካ ይኽእል እዩ (ከም ምላሽ ዝህቡ ኣቀማምጣታት)።

.flex-rowንኣግማድ ኣንፈት ንምቕማጥ (ናይ መርበብ ሓበሬታ ነባሪ)፣ ወይ .flex-row-reverseንኣግማድ ኣንፈት ካብቲ ኣንጻር ወገን ንምጅማር ተጠቐም ።

ፍሌክስ ኣቕሓ 1
ፍሌክስ ኣቕሓ 2
ፍሌክስ ኣርእስቲ 3
ፍሌክስ ኣቕሓ 1
ፍሌክስ ኣቕሓ 2
ፍሌክስ ኣርእስቲ 3
<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

.flex-columnቀጥታዊ ኣንፈት ንምቕማጥ ተጠቐም ፣ ወይ .flex-column-reverseድማ ነቲ ቀጥታዊ ኣንፈት ካብቲ ኣንጻር ወገን ንምጅማር ተጠቐም።

ፍሌክስ ኣቕሓ 1
ፍሌክስ ኣቕሓ 2
ፍሌክስ ኣርእስቲ 3
ፍሌክስ ኣቕሓ 1
ፍሌክስ ኣቕሓ 2
ፍሌክስ ኣርእስቲ 3
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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

ትሕዝቶ ምምኽናይ

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

ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
<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>

ምላሽ ዝህቡ ፍልልያት ን justify-content.

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

ነገራት ኣሰልፍዎም

ኣብ ፍሌክስቦክስ ኮንተይነራት ዝርከቡ ዩቲሊቲታት ተጠቐም 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-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

ኣውቶ ማርጅን

ፍሌክስቦክስ ፍሌክስ ኣሰላልፋታት ምስ ኣውቶ ማርጅን ክትሓዋውሶ ከለኻ ገለ ጽቡቕ ዘደንቕ ነገራት ክገብር ይኽእል እዩ። ኣብ ታሕቲ ሰለስተ ኣብነታት ናይ ምቁጽጻር ፍሌክስ ነገራት ብመንገዲ ኣውቶ ማርጅን ተገሊጾም ኣለዉ፡ ነባሪ (ኣውቶ ማርጅን የለን)፡ ክልተ ነገራት ናብ የማን ( .mr-auto) ምድፋእ፡ ከምኡ’ውን ክልተ ነገራት ናብ ጸጋም ምድፋእ ( .ml-auto) እዮም።

justify-contentእቲ ዘሕዝን ግን IE10ን IE11ን ኣብ ፍሌክስ ነገራት ወላዲኦም ዘይነባሪ ዋጋ ዘለዎም auto margins ብግቡእ ኣይድግፉን እዮም ። ንዝያዳ ዝርዝር ሓበሬታ ነዚ StackOverflow መልሲ ርአ ።

ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="ml-auto p-2">Flex item</div>
</div>

ምስ ኣሰላልፋ-ኣቑሑት።

ሓደ ተዓጻጻፊ ኣቕሓ ናብ ላዕሊ ወይ ታሕቲ ናይ ሓደ መትሓዚ align-itemsflex-direction: column፣ ከምኡውን margin-top: autoወይ ብምሕዋስ ብቐጥታ ኣንቀሳቕሶ margin-bottom: auto

ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
ፍሌክስ ኣቕሓ
<div class="d-flex align-items-start flex-column" style="height: 200px;">
  <div class="mb-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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

ስርዓት

ናይ ፍሉያት ፍሌክስ ነገራት ብኣጻብዕ ዝቑጸሩ ዩቲሊቲታት ስእላዊ ቅደም ተኸተል ምቕያር ። orderንሓደ ኣቕሓ መጀመርታ ወይ ናይ መወዳእታ ንምግባር ኣማራጺታት ጥራይ ኢና ንህብ፣ ከምኡ’ውን ነቲ DOM ትእዛዝ ንምጥቃም ዳግማይ ምትዕርራይ። ከምቲ orderዝኾነ ምሉእ ቁጽሪ ዋጋ ዝወስድ (ንኣብነት, 5), ንዝኾነ ተወሳኺ ክብርታት ዘድልዩ ብሕታዊ CSS ወስኹ።

ቀዳማይ ፍሌክስ ኣቕሓ
ካልኣይ ፍሌክስ ኣቕሓ
ሳልሳይ ፍሌክስ ኣቕሓ
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>

ምላሽ ዝህቡ ፍልልያት ን order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

ትሕዝቶ ኣሰልፍ

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