تور تۈۋرۈكى ، يول باشلاش ، زاپچاسلار ۋە تېخىمۇ كۆپ ئىنكاس قايتۇرۇش ئەۋرىشىم ئەسلىھەلىرى بىلەن ئورۇنلاشتۇرۇش ، توغرىلاش ۋە چوڭ-كىچىكلىكىنى تېز باشقۇرۇڭ. تېخىمۇ مۇرەككەپ يولغا قويۇش ئۈچۈن ، خاس CSS زۆرۈر بولۇشى مۇمكىن.

جانلىق ھەرىكەتلەرنى قوزغىتىڭ

قوللىنىشچان displayپروگراممىلارنى ئىشلىتىپ ئەۋرىشىم قاچا ياساپ ، بىۋاسىتە بالىلار ئېلېمېنتلىرىنى ئەۋرىشىم تۈرلەرگە ئايلاندۇرىسىز. ئەۋرىشىم قاچا ۋە بۇيۇملارنى قوشۇمچە ئەۋرىشىم خۇسۇسىيىتى بىلەن تېخىمۇ ئۆزگەرتكىلى بولىدۇ.

مەن ئەۋرىشىم قاچا!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
مەن بىر ئىنچىكە ئەۋرىشىم قاچا!
<div class="d-inline-flex p-2 bd-highlight">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قارشى تەرەپتىن توغرىسىغا توغرىلاڭ.

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 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>

.flex-columnتىك يۆنىلىش بەلگىلەشكە ياكى .flex-column-reverseقارشى تەرەپتىن تىك يۆنىلىشنى قوزغىتىشقا ئىشلىتىڭ .

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 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>

ئىنكاسچان ئۆزگىرىشلەرمۇ مەۋجۇت 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.betweenaround

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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نى تاللاڭ center.baselinestretch

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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

تولدۇر

سىنىپنى بىر يۈرۈش قېرىنداش ئېلېمېنتلار ئارقىلىق ئىشلىتىپ .flex-fill، بارلىق گورىزونتال بوشلۇقنى ئىگىلىگەندە ، ئۇلارنىڭ مەزمۇنىغا تەڭ (ياكى مەزمۇنى ئۇلارنىڭ چېگرا رامكىسىدىن ئېشىپ كەتمىسە ئوخشاش كەڭلىك) گە زورلاڭ.

نۇرغۇن مەزمۇنغا ئىگە جانلىق
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

ئىنكاسچان ئۆزگىرىشلەرمۇ مەۋجۇت flex-fill.

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

ئۆسۈپ يېتىلىدۇ

ئاممىۋى ئەسلىھەلەردىن پايدىلىنىپ .flex-grow-*ئەۋرىشىم تۈرنىڭ ئۆسۈپ يېتىلىش بوشلۇقىنى تولدۇرۇڭ. تۆۋەندىكى مىسالدا ، .flex-grow-1ئېلېمېنتلار بار بولغان بارلىق بوشلۇقنى ئىشلىتىدۇ ، شۇنىڭ بىلەن بىر ۋاقىتتا قالغان ئىككى ئەۋرىشىم بۇيۇمنىڭ لازىملىق بوشلۇقىغا يول قويىدۇ.

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئۈچىنچى ئەۋرىشىم تۈر
<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>

زۆرۈر تېپىلغاندا ئەۋرىشىم تۈرنىڭ كىچىكلەش .flex-shrink-*ئىقتىدارىنى ئالماشتۇرۇڭ. تۆۋەندىكى مىسالدا ، ئىككىنچى ئەۋرىشىم تۈر .flex-shrink-1ئۇنىڭ مەزمۇنىنى يېڭى قۇرغا ئوراپ ، «كىچىكلەپ» ئالدىنقى ئەۋرىشىم تۈر بىلەن تېخىمۇ كۆپ بوشلۇق ھازىرلايدۇ .w-100.

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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>

ئىنكاسچان ئۆزگىرىشلەرمۇ 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

Auto margins

ئەۋرىشىم ماسلىشىشچانلىقىنى ئاپتوماتىك گىرۋەك بىلەن ئارىلاشتۇرغاندا Flexbox بەزى قالتىس ئىشلارنى قىلالايدۇ. تۆۋەندە كۆرسىتىلگىنى ئاپتوماتىك گىرۋەك ئارقىلىق ئەۋرىشىم تۈرلەرنى كونترول قىلىشنىڭ ئۈچ مىسالى: سۈكۈتتىكى (ئاپتوماتىك پەرقى يوق) ، ئىككى تۈرنى ئوڭغا ( .mr-auto) ئىتتىرىش ۋە ئىككى تۈرنى سولغا ئىتتىرىش ( .ml-auto).

justify-contentبەختكە قارشى ، IE10 ۋە IE11 ئاتا-ئانىسىنىڭ سۈكۈتتىكى قىممىتى بولمىغان ئەۋرىشىم تۈرلەرنىڭ ئاپتوماتىك پەرقىنى مۇۋاپىق قوللىمايدۇ . تېخىمۇ كۆپ تەپسىلات ئۈچۈن بۇ StackOverflow جاۋابىنى كۆرۈڭ.

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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>

توغرىلاش تۈرلىرى بىلەن

بىر ئەۋرىشىم نەرسىنى ئارىلاشتۇرۇپ قاچىنىڭ ئۈستى ياكى ئاستىغا توغرىلاڭ align-items، ياكى .flex-direction: columnmargin-top: automargin-bottom: auto

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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>

Wrap

ئەۋرىشىم بۇيۇملارنىڭ ئەۋرىشىم قاچىغا قانداق ئورالغانلىقىنى ئۆزگەرتىڭ. ئوراش ياكى ئوراش ياكى تەتۈر ئوراش بىلەن .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 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>

ئىنكاسچان ئۆزگىرىشلەرمۇ مەۋجۇت 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) ,,,, ياكى . بۇ ئىقتىدارلارنى كۆرسىتىش ئۈچۈن ئەۋرىشىم تۈرلەرنىڭ سانىنى كۆپەيتتۇق ۋە كۆپەيتتۇق.centerbetweenaroundstretchflex-wrap: wrap

Heads up! بۇ مۈلۈكنىڭ بىر قۇر ئەۋرىشىم تۈرلەرگە ھېچقانداق تەسىرى يوق.

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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-between
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-between
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-between
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-between
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-between
  • .align-content-xl-around
  • .align-content-xl-stretch