ئاساسلىق مەزمۇنغا ئاتلاڭ Docs يول باشلاش

تور تۈۋرۈكى ، يول باشلاش ، زاپچاس ۋە باشقا ئىقتىدارلارنىڭ تولۇق يۈرۈشلۈك يۇمشاق دېتاللىرى بىلەن ئورۇنلاشتۇرۇش ، توغرىلاش ۋە چوڭ-كىچىكلىكىنى تېز باشقۇرۇڭ. تېخىمۇ مۇرەككەپ يولغا قويۇش ئۈچۈن ، خاس 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
  • .d-xxl-flex
  • .d-xxl-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
  • .flex-xxl-row
  • .flex-xxl-row-reverse
  • .flex-xxl-column
  • .flex-xxl-column-reverse

مەزمۇننى ئاقلاڭ

ئەۋرىشىم قاچىلاردىكى ئەسۋابلارنى ئىشلىتىپ justify-contentئاساسىي ئوقتىكى ئەۋرىشىم تۈرلەرنىڭ توغرىلىنىشىنى ئۆزگەرتىڭ (باشلاش x ئوق بولسا ، y ئوق بولسا flex-direction: column). ( startتوركۆرگۈ سۈكۈتتىكى end) ,,,, ياكى .centerbetweenaroundevenly

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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>
<div class="d-flex justify-content-evenly">...</div>

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

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-evenly
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-sm-evenly
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-md-evenly
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-lg-evenly
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around
  • .justify-content-xl-evenly
  • .justify-content-xxl-start
  • .justify-content-xxl-end
  • .justify-content-xxl-center
  • .justify-content-xxl-between
  • .justify-content-xxl-around
  • .justify-content-xxl-evenly

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

ئەۋرىشىم قاچىلاردىكى ئەسۋابلارنى ئىشلىتىپ 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-items-xxl-start
  • .align-items-xxl-end
  • .align-items-xxl-center
  • .align-items-xxl-baseline
  • .align-items-xxl-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
  • .align-self-xxl-start
  • .align-self-xxl-end
  • .align-self-xxl-center
  • .align-self-xxl-baseline
  • .align-self-xxl-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-xxl-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
  • .flex-xxl-{grow|shrink}-0
  • .flex-xxl-{grow|shrink}-1

Auto margins

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

ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
ئەۋرىشىم تۈر
<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="me-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="ms-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
  • .flex-xxl-nowrap
  • .flex-xxl-wrap
  • .flex-xxl-wrap-reverse

زاكاز

ئاز بىر قىسىم ئاممىۋى مۇلازىمەتلەر بىلەن ئالاھىدە ئەۋرىشىم تۈرلەرنىڭ كۆرۈنۈش تەرتىپىنى ئۆزگەرتىڭ order. بىز پەقەت بىرىنچى ياكى ئاخىرقى بىر تۈر ياساش ، شۇنداقلا DOM تەرتىپىنى ئىشلىتىش ئۈچۈن ئەسلىگە كەلتۈرۈش ئۈچۈن تەمىنلەيمىز. 0 دىن 5 گىچە orderبولغان پۈتۈن ساننى ئالغاندا ، لازىملىق قوشۇمچە قىممەتلەرگە ئىختىيارى 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-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xxl-0
  • .order-xxl-1
  • .order-xxl-2
  • .order-xxl-3
  • .order-xxl-4
  • .order-xxl-5

بۇنىڭدىن باشقا ، يەنە ئىنكاس قايتۇرۇش .order-firstۋە .order-lastدەرسلەر بار بولۇپ ، ئايرىم-ئايرىم ھالدا orderئېلېمېنتنىڭ ئۆزگىرىشىنى ئۆزگەرتىدۇ .order: -1order: 6

  • .order-first
  • .order-last
  • .order-sm-first
  • .order-sm-last
  • .order-md-first
  • .order-md-last
  • .order-lg-first
  • .order-lg-last
  • .order-xl-first
  • .order-xl-last
  • .order-xxl-first
  • .order-xxl-last

مەزمۇننى توغرىلاڭ

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-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
  • .align-content-xxl-start
  • .align-content-xxl-end
  • .align-content-xxl-center
  • .align-content-xxl-around
  • .align-content-xxl-stretch

مېدىيا ئوبيېكتى

Bootstrap 4 دىن مېدىيا ئوبيېكتى زاپچاسلىرىنى كۆپەيتمەكچىمۇ ؟ ئۇنى ئىلگىرىكىگە قارىغاندا تېخىمۇ جانلىق ۋە خاسلاشتۇرغىلى بولىدىغان بىر قانچە ئەۋرىشىم ئەسۋابلار بىلەن قىسقا ۋاقىت ئىچىدە قايتا يارىتىڭ.

Placeholder Image
بۇ مېدىيا زاپچاسلىرىنىڭ بەزى مەزمۇنلىرى. بۇنى خالىغان مەزمۇنغا ئالماشتۇرۇپ ، ئېھتىياجغا ئاساسەن تەڭشىيەلەيسىز.
<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ھەمدە رەسىمنىڭ يېنىدىكى مەزمۇننى تىك مەركەزلەشتۈرمەكچى دەيسىز:

Placeholder Image
بۇ مېدىيا زاپچاسلىرىنىڭ بەزى مەزمۇنلىرى. بۇنى خالىغان مەزمۇنغا ئالماشتۇرۇپ ، ئېھتىياجغا ئاساسەن تەڭشىيەلەيسىز.
<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

Sass

Utilities API

Flexbox قورالى بىزنىڭ API دا ئېلان قىلىنغان scss/_utilities.scss. API نى قانداق ئىشلىتىشنى ئۆگىنىۋېلىڭ.

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),