Source

Jilicsan

Si dhakhso leh u maamul qaabka, toosinta, iyo cabbirka tiirarka xadhkaha, hagidda, qaybaha, iyo in ka badan oo leh qalab buuxa oo ka jawaabaya isticmaalka flexbox. Hirgelinta kakan, CSS caadadii ayaa laga yaabaa inay lagama maarmaan noqoto.

Daar dabeecadaha dabacsanaanta

Codso displayutilities si aad u abuurto weel flexbox oo u beddelo canaasiirta tooska ah ee carruurta walxaha dabacsan Weelasha rogrogmi kara iyo shayada ayaa awood u leh in wax laga beddelo iyada oo leh sifooyin dabacsan oo dheeraad ah.

Waxaan ahay weel flexbox ah!
<div class="d-flex p-2">I'm a flexbox container!</div>
Waxaan ahay weel flexbox inline ah!
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>

Kala duwanaansho jawaab celin ah ayaa sidoo kale u jira .d-flexiyo .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

Jihada

Deji jihada walxaha dabacsan weel dabacsan oo leh aaladaha jihada. Inta badan waxaad ka tagi kartaa fasalka jiifka halkan sida browser-ka caadiga ah uu yahay row. Si kastaba ha ahaatee, waxaa laga yaabaa inaad la kulanto xaalado aad u baahan tahay inaad si cad u dejiso qiimahan (sida qaabaynta ka jawaabaya).

Isticmaal .flex-rowsi aad u dejiso jihada toosan ( browser default ), ama .flex-row-reversesi aad u bilowdo jihada toosan ee dhinaca ka soo horjeeda.

Shayga dabacsan 1
Flex shayga 2
Shayga dabacsan 3
Shayga dabacsan 1
Flex shayga 2
Shayga dabacsan 3
<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>

Isticmaal .flex-columnsi aad u dejiso jihada toosan, ama .flex-column-reversesi aad u bilowdo jihada toosan ee dhinaca ka soo horjeeda.

Shayga dabacsan 1
Flex shayga 2
Shayga dabacsan 3
Shayga dabacsan 1
Flex shayga 2
Shayga dabacsan 3
<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>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

U cadee waxa ku jira

U adeegso justify-contentagabka weelasha flexbox si aad u bedesho isku xidhka shayada dabacsan ee dhidibka ugu weyn ( dhidibka x-bilawga, y- dhidibka haddii flex-direction: column). Ka dooro start(browser default), end, center, between, ama around.

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<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>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

Isku hagaaji walxaha

U adeegso align-itemsagabka weelasha flexbox si aad u bedesho isku xidhka shayada dabacsan ee dhidibka iskutallaabta ( dhidibka y ee bilaabanaya, dhidibka x- haddii flex-direction: column). Ka dooro start, end, center, baseline, ama stretch(browser default).

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<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>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

Is waafaji

U adeegso align-selfutilities shayada flexbox si aad shakhsi ahaan u bedesho toosinta dhidibka iskutallaabta ( dhidibka y si uu u bilaabo, x- dhidibka haddii flex-direction: column). Ka dooro isla xulashooyinka align-items: start, end, center, baseline, ama stretch(browser default).

Shayga dabacsan
Walax dabacsan oo toosan
Shayga dabacsan
Shayga dabacsan
Walax dabacsan oo toosan
Shayga dabacsan
Shayga dabacsan
Walax dabacsan oo toosan
Shayga dabacsan
Shayga dabacsan
Walax dabacsan oo toosan
Shayga dabacsan
Shayga dabacsan
Walax dabacsan oo toosan
Shayga dabacsan
<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>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

Margin otomaatig ah

Flexbox waxa uu samayn karaa waxyaabo aad u qurux badan marka aad isku darto jaangooyooyinka flex-ka leh iyo margin auto. Hoos waxaa lagu muujiyey saddex tusaale oo lagu xakameynayo walxaha dabacsan iyadoo loo marayo margin otomaatig ah: default (majirin automargin), ku riixida laba shay dhanka midig ( .mr-auto), iyo ku riixida laba shay bidix ( .ml-auto).

Nasiib darro, IE10 iyo IE11 si sax ah uma taageeraan xad-dhaafka otomaatiga ah ee alaabta dabacsan ee waalidkood leeyahay qiime aan caadi ahayn justify-content. Faahfaahin dheeraad ah ka arag jawaabta StackOverflow .

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<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>

Iyada oo walxaha isku toosan

Si toos ah u dhaqaaji hal shay oo dabacsan xagga sare ama hoose ee weelka adoo isku daraya align-items, flex-direction: columnama .margin-top: automargin-bottom: auto

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<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>

Duub

Beddel sida walxaha dabacsan ugu duubaan weel dabacsan. Ka dooro wax duub ah haba yaraatee ( browserka default ) oo leh .flex-nowrap, ku duub .flex-wrap, ama dib ugu laabashada .flex-wrap-reverse.

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex flex-nowrap">
  ...
</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex flex-wrap">
  ...
</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

Dalbo

Beddel habka muuqaalka ah ee walxaha dabacsanaansan ee gaarka ah adigoo isticmaalaya qalab fara badan order. Waxaan bixinaa oo kaliya fursadaha samaynta shay marka hore ama u dambeeya, iyo sidoo kale dib u dajin si loo isticmaalo amarka DOM. Sida orderloo qaato qiime kasta oo isugeyn ah (tusaale, 5), ku dar CSS caadada u ah qiima kasta oo dheeri ah oo loo baahan yahay.

Shayga ugu horreeya
Shayga dabacsanaanta labaad
Shayga saddexaad ee dabacsan
<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>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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

Isku hagaaji nuxurka

U adeegso align-contentutility weelasha flexbox si aad isugu toosiso shayada dabacsan ee dhidibka iskutallaabta. Ka dooro start(browser default), end, center, between, aroundama stretch. Si aan u muujino adeegyadan, waanu dhaqan galnay flex-wrap: wrapoo aanu kordhinay tirada alaabta dabacsan.

Madaxa kor u qaad! Hantidan wax saamayn ah kuma laha hal saf oo walxaha dabacsan.

Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-end flex-wrap">...</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-center flex-wrap">...</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-between flex-wrap">...</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-around flex-wrap">...</div>
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
Shayga dabacsan
<div class="d-flex align-content-stretch flex-wrap">...</div>

Kala duwanaansho jawaab celin ah ayaa sidoo kale jira 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