Source

Flex

Immaniġġja malajr it-tqassim, l-allinjament, u d-daqs tal-kolonni tal-grilja, in-navigazzjoni, il-komponenti, u aktar b'firxa sħiħa ta 'utilitajiet tal-flexbox li jirrispondu. Għal implimentazzjonijiet aktar kumplessi, CSS personalizzat jista 'jkun meħtieġ.

Jippermettu imgieba flex

Applika displayutilitajiet biex toħloq kontenitur flexbox u tittrasforma elementi diretti tat-tfal f'oġġetti flex. Il-kontenituri u l-oġġetti Flex jistgħu jiġu modifikati aktar bi proprjetajiet flex addizzjonali.

Jien kontenitur flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jien kontenitur flexbox inline!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal .d-flexu .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

Direzzjoni

Issettja d-direzzjoni ta 'oġġetti flex f'kontenitur flex b'utilitajiet ta' direzzjoni. Fil-biċċa l-kbira tal-każijiet tista' tħalli barra l-klassi orizzontali hawnhekk peress li d-default tal-browser huwa row. Madankollu, tista' tiltaqa' ma' sitwazzjonijiet fejn kellek bżonn tissettja dan il-valur b'mod espliċitu (bħal layouts li jirrispondu).

Uża .flex-rowbiex tissettja direzzjoni orizzontali (il-browser default), jew .flex-row-reversebiex tibda d-direzzjoni orizzontali min-naħa opposta.

Oġġett Flex 1
Oġġett Flex 2
Oġġett Flex 3
Oġġett Flex 1
Oġġett Flex 2
Oġġett Flex 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>

Uża .flex-columnbiex tissettja direzzjoni vertikali, jew .flex-column-reversebiex tibda d-direzzjoni vertikali min-naħa opposta.

Oġġett Flex 1
Oġġett Flex 2
Oġġett Flex 3
Oġġett Flex 1
Oġġett Flex 2
Oġġett Flex 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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Iġġustifika l-kontenut

Uża justify-contentutilitajiet fuq kontenituri flexbox biex tbiddel l-allinjament ta 'oġġetti flex fuq l-assi prinċipali (l-assi x biex tibda, l-assi y jekk flex-direction: column). Agħżel minn start(default tal-browser), end, center, between, jew around.

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Allinja l-oġġetti

Uża align-itemsutilitajiet fuq kontenituri flexbox biex tbiddel l-allinjament ta 'oġġetti flex fuq l-assi trasversali (l-assi y biex tibda, l-assi x jekk flex-direction: column). Agħżel minn start, end, center, baseline, jew stretch(default tal-browser).

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Tallinja ruħha

Uża align-selfutilitajiet fuq oġġetti tal-flexbox biex tbiddel individwalment l-allinjament tagħhom fuq l-assi trasversali (l-assi y biex tibda, l-assi x jekk flex-direction: column). Agħżel mill-istess għażliet bħal align-items: start, end, center, baseline, jew stretch(default tal-browser).

Oġġett Flex
Oġġett flex allinjat
Oġġett Flex
Oġġett Flex
Oġġett flex allinjat
Oġġett Flex
Oġġett Flex
Oġġett flex allinjat
Oġġett Flex
Oġġett Flex
Oġġett flex allinjat
Oġġett Flex
Oġġett Flex
Oġġett flex allinjat
Oġġett Flex
<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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Imla

Uża l- .flex-fillklassi fuq serje ta 'elementi aħwa biex iġġiegħelhom f'wisgħat ugwali filwaqt li tieħu l-ispazju orizzontali disponibbli kollu. Speċjalment utli għan-navigazzjoni b'wisa' ugwali, jew ġustifikata.

Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Ikber u tiċkien

Uża .flex-grow-*l-utilitajiet biex taqleb il-kapaċità ta 'oġġett flex li jikber biex timla l-ispazju disponibbli. Fl-eżempju hawn taħt, l- .flex-grow-1elementi jużaw l-ispazju kollu disponibbli li jistgħu, filwaqt li jippermettu liż-żewġ oġġetti flex li jifdal l-ispazju meħtieġ tagħhom.

Oġġett Flex
Oġġett Flex
It-tielet oġġett flex
<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>

Uża .flex-shrink-*l-utilitajiet biex taqleb il-kapaċità ta 'oġġett flex li tiċkien jekk meħtieġ. Fl-eżempju t'hawn taħt, it-tieni oġġett flex ma .flex-shrink-1huwa sfurzat biex ikebbeb il-kontenut tiegħu għal linja ġdida, "tiċkien" biex jippermetti aktar spazju għall-oġġett flex preċedenti b' .w-100.

Oġġett Flex
Oġġett Flex
<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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal flex-growu 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

Marġini awtomatiċi

Flexbox jista 'jagħmel xi affarijiet pjuttost tal-biża' meta tħallat allinjamenti flex ma 'marġini awtomatiċi. Hawn taħt jidhru tliet eżempji ta 'kontroll ta' oġġetti flex permezz ta 'marġini awtomatiċi: default (l-ebda marġni awtomatika), imbuttar żewġ oġġetti lejn il-lemin ( .mr-auto), u imbuttar żewġ oġġetti lejn ix-xellug ( .ml-auto).

Sfortunatament, IE10 u IE11 ma jappoġġjawx sew il-marġini awtomatiċi fuq oġġetti flex li l-ġenitur tagħhom għandu valur mhux default justify-content. Ara din it-tweġiba StackOverflow għal aktar dettalji.

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<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>

Bil-allinjament-oġġetti

Mexxi oġġett wieħed flex b'mod vertikali lejn il-parti ta' fuq jew t'isfel ta' kontenitur billi tħallat align-items, flex-direction: column, u margin-top: autojew margin-bottom: auto.

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<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>

Kebbeb

Ibdel kif l-oġġetti flex jkebbew f'kontenitur flex. Agħżel minn ebda tgeżwir (l-default tal-brawżer) bi .flex-nowrap, tgeżwir bi .flex-wrap, jew tgeżwir b'lura b' .flex-wrap-reverse.

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex flex-nowrap">
  ...
</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex flex-wrap">
  ...
</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Ordni

Ibdel l -ordni viżwali ta 'oġġetti flex speċifiċi b'numru żgħir ta' orderutilitajiet. Aħna nipprovdu biss għażliet biex nagħmlu oġġett l-ewwel jew l-aħħar, kif ukoll reset biex tuża l-ordni DOM. Kif orderjieħu kwalunkwe valur sħiħ (eż, 5), żid CSS personalizzat għal kwalunkwe valuri addizzjonali meħtieġa.

L-ewwel oġġett flex
It-tieni oġġett flex
It-tielet oġġett flex
<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>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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

Allinja l-kontenut

Uża align-contentutilitajiet fuq kontenituri flexbox biex tallinja l-oġġetti flex flimkien fuq l-assi trasversali. Agħżel minn start(default tal-browser), end, center, between, around, jew stretch. Biex nuru dawn l-utilitajiet, inforzajna u żidna flex-wrap: wrapn-numru ta 'oġġetti flex.

Irjus up! Din il-proprjetà m'għandha l-ebda effett fuq ringieli singoli ta' oġġetti flex.

Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-end flex-wrap">...</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-center flex-wrap">...</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-between flex-wrap">...</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-around flex-wrap">...</div>
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
Oġġett Flex
<div class="d-flex align-content-stretch flex-wrap">...</div>

Jeżistu wkoll varjazzjonijiet li jirrispondu għal 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