فلێکس
بە خێرایی داڕشتن، ڕێکخستن و قەبارەدانانی ستوونەکانی تۆڕ، گەشتکردن، پێکهاتەکان و زۆر شتی تر بەڕێوەبەرە بە کۆمەڵەیەکی تەواو لە سوودمەندییەکانی فلیکسبۆکسی وەڵامدەرەوە. بۆ جێبەجێکردنی ئاڵۆزتر، ڕەنگە 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
سوودمەندییەکان لەسەر دەفرەکانی فلیکسبۆکس بەکاربهێنە justify-content
بۆ گۆڕینی ڕێکخستنی شتەکانی فلیکس لەسەر میحوەر سەرەکی (میحوەر x بۆ دەستپێکردن، میحوەر y ئەگەر 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
فلێکسبۆکس دەتوانێت چەند شتێکی زۆر سەرسوڕهێنەر ئەنجام بدات کاتێک ڕێکخستنی فلێکس لەگەڵ پەراوێزی ئۆتۆماتیکی تێکەڵ دەکەیت. لە خوارەوە سێ نموونەی کۆنترۆڵکردنی بابەتە فلیکسەکان لە ڕێگەی پەراوێزی ئۆتۆماتیکیەوە نیشان دراوە: پێشوەختە (بێ پەراوێزی ئۆتۆماتیکی)، پاڵنانی دوو بابەتە بۆ لای ڕاست ( .mr-auto
)، و پاڵنانی دوو بابەتە بۆ لای چەپ ( .ml-auto
).
بەداخەوە IE10 و IE11 بە باشی پشتگیری لە پەراوێزی ئۆتۆماتیکی ناکەن لەسەر ئەو بابەتە فلیکسانەی کە دایک و باوکیان justify-content
بەهای ناپێشوەختەی هەیە. بۆ زانیاری زیاتر سەیری ئەم وەڵامەی 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