ፍሌክስ
የፍርግርግ አምዶችን አቀማመጥ፣ አሰላለፍ እና መጠን፣ አሰሳን፣ አካላትን እና ሌሎችንም ከሙሉ ምላሽ ሰጪ flexbox መገልገያዎች ጋር በፍጥነት ያስተዳድሩ። ለተጨማሪ ውስብስብ አተገባበር፣ ብጁ CSS አስፈላጊ ሊሆን ይችላል።
ተለዋዋጭ ባህሪያትን አንቃ
display
ተጣጣፊ ሳጥን ለመፍጠር መገልገያዎችን ይተግብሩ እና ቀጥተኛ የልጆችን ንጥረ ነገሮች ወደ ተጣጣፊ እቃዎች ይለውጡ። ተጣጣፊ መያዣዎች እና እቃዎች ከተጨማሪ የመተጣጠፍ ባህሪያት የበለጠ ሊሻሻሉ ይችላሉ.
ምላሽ ሰጪ ልዩነቶችም አሉ ለ .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
አግድም አቅጣጫውን ከተቃራኒው ጎን ለመጀመር ይጠቀሙ ።
.flex-column
አቀባዊ አቅጣጫን ለማዘጋጀት ወይም .flex-column-reverse
ከተቃራኒው ጎን ወደ አቀባዊ አቅጣጫ ለመጀመር ይጠቀሙ ።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
ይምረጡ ።start
end
center
between
around
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
ወይም (የአሳሽ ነባሪ) ይምረጡ ።center
baseline
stretch
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
የአሳሽ ነባሪ)።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
ሁሉንም የሚገኙትን አግድም ቦታዎች እየወሰዱ ከይዘታቸው ጋር እኩል የሆነ ስፋቶችን (ወይም ይዘታቸው ከድንበር ሳጥኖቻቸው የማይበልጥ ከሆነ) ለማስገደድ ክፍሉን በተከታታይ የወንድም እህት ክፍሎች ላይ ይጠቀሙ ።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
ያድጉ እና ይቀንሱ
.flex-grow-*
የተለዋዋጭ ንጥል ነገር ያለውን ቦታ ለመሙላት የማደግ ችሎታን ለመቀየር መገልገያዎችን ይጠቀሙ ። ከታች ባለው ምሳሌ፣ .flex-grow-1
ንጥረ ነገሮቹ የሚችሉትን ሁሉንም ቦታ ይጠቀማሉ፣ የተቀሩትን ሁለት ተጣጣፊ እቃዎች አስፈላጊ ቦታቸውን ሲፈቅዱ።
.flex-shrink-*
አስፈላጊ ከሆነ የመቀነስ ችሎታን ለመቀየር መገልገያዎችን ይጠቀሙ ። ከዚህ በታች ባለው ምሳሌ፣ ሁለተኛው ተጣጣፊ ንጥል .flex-shrink-1
ይዘቱን ወደ አዲስ መስመር ለመጠቅለል ይገደዳል፣ “እየጠበበ” ለቀደመው ተጣጣፊ ንጥል በ .w-100
.
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
ራስ-ሰር ህዳጎች
የተለዋዋጭ አሰላለፍ ከራስ-ህዳጎች ጋር ሲቀላቀሉ Flexbox አንዳንድ በጣም ጥሩ ነገሮችን ሊያደርግ ይችላል። ከታች የሚታዩት ተጣጣፊ እቃዎችን በራስ-ሰር ህዳጎች የመቆጣጠር ሶስት ምሳሌዎች ናቸው፡ ነባሪ (ራስ-ሰር ህዳግ የለም)፣ ሁለት እቃዎችን ወደ ቀኝ ( .mr-auto
) መግፋት እና ሁለት እቃዎችን ወደ ግራ ( .ml-auto
) መግፋት።
justify-content
እንደ አለመታደል ሆኖ፣ IE10 እና IE11 ወላጆቻቸው ነባሪ ያልሆነ እሴት ባላቸው በተለዋዋጭ ዕቃዎች ላይ አውቶማቲክ ህዳጎችን በትክክል አይደግፉም ። ለተጨማሪ ዝርዝሮች ይህንን የStackOverflow መልስ ይመልከቱ።
ከአሰላለፍ-ንጥሎች ጋር
በአቀባዊ አንድ ተጣጣፊ እቃ ወደ መያዣው የላይኛው ወይም የታችኛው ክፍል በማቀላቀል align-items
፣ flex-direction: column
እና margin-top: auto
ወይም ውሰድ margin-bottom: auto
።
መጠቅለል
ተጣጣፊ እቃዎች በተለዋዋጭ መያዣ ውስጥ እንዴት እንደሚታጠፉ ይቀይሩ. ከምንም አይነት መጠቅለያ ይምረጡ (የአሳሹ ነባሪ) በ .flex-nowrap
፣ በመጠቅለል .flex-wrap
ወይም በመገልበጥ .flex-wrap-reverse
።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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 ያክሉ።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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
ቀና በል! ይህ ንብረት በነጠላ ረድፍ በተለዋዋጭ እቃዎች ላይ ምንም ተጽእኖ የለውም።
ምላሽ ሰጪ ልዩነቶችም አሉ ለ 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