in English

ምትዕፅፃፍ

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

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

ፍሌክስቦክስ 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

ኣንፈት

ኣንፈት ናይ ፍሌክስ ነገራት ኣብ ፍሌክስ መትሓዚ ምስ ኣንፈት ዩቲሊቲታት ኣቐምጥ። ኣብ መብዛሕትኡ እዋን ኣብዚ ነቲ ኣግማድ ክፍሊ ክትገድፎ ትኽእል ኢኻ ምኽንያቱ እቲ ናይ መርበብ ሓበሬታ ነባሪ 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

ትሕዝቶ ምምኽናይ

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

ምላእ

ነቲ .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-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

ኣውቶ ማርጅን

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

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

ፍሌክስ ኣቕሓ

<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="mr-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="ml-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

ስርዓት

ናይ ፍሉያት ፍሌክስ ነገራት ብኣጻብዕ ዝቑጸሩ ዩቲሊቲታት ስእላዊ ቅደም ተኸተል ምቕያር ። orderንሓደ ኣቕሓ መጀመርታ ወይ ናይ መወዳእታ ንምግባር ኣማራጺታት ጥራይ ኢና ንህብ፣ ከምኡ’ውን ነቲ DOM ትእዛዝ ንምጥቃም ዳግመ ምትዕርራይ። ከምቲ orderዝኾነ ምሉእ ቁጽሪ ዋጋ ዝወስድ (ንኣብነት, 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-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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch