ምትዕፅፃፍ

ኣቀማምጣ፣ ኣሰላልፋን ዓቐንን ናይ ሽቦ ዓምድታት፣ ምድህሳስ፣ ኣካላትን ካልእን ብሙሉእ ስብስብ ምላሽ ዝህቡ ፍሌክስቦክስ ዩቲሊቲታት ብቕልጡፍ ኣመሓድር። ንዝያዳ ዝተሓላለኹ ኣተገባብርኡ፡ ብሕታዊ 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ንኣግማድ ኣንፈት ካብቲ ኣንጻር ወገን ንምጅማር ተጠቐም ።

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

<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-items፣ flex-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