ፍሌክስ

የፍርግርግ አምዶችን አቀማመጥ፣ አሰላለፍ እና መጠን፣ አሰሳን፣ አካላትን እና ሌሎችንም ከሙሉ ምላሽ ሰጪ flexbox መገልገያዎች ጋር በፍጥነት ያስተዳድሩ። ለተጨማሪ ውስብስብ አተገባበር፣ ብጁ 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

ይዘትን አረጋግጥ

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

<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-ዘንግ፣ 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-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

ራስ-ሰር ህዳጎች

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

justify-contentእንደ አለመታደል ሆኖ፣ IE10 እና IE11 ወላጆቻቸው ነባሪ ያልሆነ እሴት ባላቸው በተለዋዋጭ ዕቃዎች ላይ አውቶማቲክ ህዳጎችን በትክክል አይደግፉም ። ለተጨማሪ ዝርዝሮች ይህንን የ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 ላይ ለማጣመር በፍሌክስቦክስ ኮንቴይነሮች ላይ መገልገያዎችን ይጠቀሙ ። ከ ( የአሳሽ ነባሪ ) ፣፣፣፣፣ ወይም ይምረጡ ። እነዚህን መገልገያዎች ለማሳየት፣ የተለዋዋጭ እቃዎችን ብዛት አስገድደናል እና ጨምረናል።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