ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

ఫ్లెక్స్

రెస్పాన్సివ్ ఫ్లెక్స్‌బాక్స్ యుటిలిటీల పూర్తి సూట్‌తో గ్రిడ్ నిలువు వరుసలు, నావిగేషన్, భాగాలు మరియు మరిన్నింటి యొక్క లేఅవుట్, అమరిక మరియు పరిమాణాన్ని త్వరగా నిర్వహించండి. మరింత సంక్లిష్టమైన అమలుల కోసం, అనుకూల 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వైపు నుండి క్షితిజ సమాంతర దిశను ప్రారంభించడానికి ఉపయోగించండి.

ఫ్లెక్స్ అంశం 1
ఫ్లెక్స్ అంశం 2
ఫ్లెక్స్ అంశం 3
ఫ్లెక్స్ అంశం 1
ఫ్లెక్స్ అంశం 2
ఫ్లెక్స్ అంశం 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వైపు నుండి నిలువు దిశను ప్రారంభించడానికి ఉపయోగించండి.

ఫ్లెక్స్ అంశం 1
ఫ్లెక్స్ అంశం 2
ఫ్లెక్స్ అంశం 3
ఫ్లెక్స్ అంశం 1
ఫ్లెక్స్ అంశం 2
ఫ్లెక్స్ అంశం 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

కంటెంట్‌ని సమర్థించండి

ప్రధాన అక్షం (ప్రారంభించాల్సిన x-అక్షం, y-axis అయితే ) justify-contentపై ఫ్లెక్స్ అంశాల అమరికను మార్చడానికి ఫ్లెక్స్‌బాక్స్ కంటైనర్‌లపై యుటిలిటీలను ఉపయోగించండి . (బ్రౌజర్ డిఫాల్ట్), , , , , లేదా flex-direction: columnనుండి ఎంచుకోండి .startendcenterbetweenaroundevenly

ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
<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, baseline, లేదా stretch(బ్రౌజర్ డిఫాల్ట్) నుండి ఎంచుకోండి .

ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
<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

స్వీయ సమలేఖనం

క్రాస్ యాక్సిస్ (ప్రారంభించాల్సిన y-యాక్సిస్, x-axis అయితే ) align-selfపై వాటి అమరికను వ్యక్తిగతంగా మార్చడానికి ఫ్లెక్స్‌బాక్స్ ఐటెమ్‌లపై యుటిలిటీలను ఉపయోగించండి . 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

ఆటో మార్జిన్లు

మీరు ఆటో మార్జిన్‌లతో ఫ్లెక్స్ అలైన్‌మెంట్‌లను మిక్స్ చేసినప్పుడు 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: columnమరియు margin-top: autoలేదా కలపడం ద్వారా ఒక ఫ్లెక్స్ అంశాన్ని నిలువుగా కంటైనర్ ఎగువన లేదా దిగువకు తరలించండి margin-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>

చుట్టు

ఫ్లెక్స్ వస్తువులు ఫ్లెక్స్ కంటైనర్‌లో ఎలా చుట్టుతాయో మార్చండి. తో చుట్టడం లేదు (బ్రౌజర్ డిఫాల్ట్), తో .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 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-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-lastorderorder: -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 చేయడానికి ఫ్లెక్స్‌బాక్స్ కంటైనర్‌లపై యుటిలిటీలను ఉపయోగించండి . (బ్రౌజర్ డిఫాల్ట్), , , , , లేదా నుండి ఎంచుకోండి . ఈ యుటిలిటీలను ప్రదర్శించడానికి, మేము ఫ్లెక్స్ ఐటెమ్‌ల సంఖ్యను అమలు చేసాము మరియు పెంచాము.startendcenterbetweenaroundstretchflex-wrap: wrap

హెడ్ ​​అప్! ఫ్లెక్స్ వస్తువుల యొక్క ఒకే వరుసలపై ఈ ఆస్తి ప్రభావం ఉండదు.

ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
ఫ్లెక్స్ అంశం
<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

మీడియా వస్తువు

బూట్‌స్ట్రాప్ 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>

సాస్

యుటిలిటీస్ API

ఫ్లెక్స్‌బాక్స్ యుటిలిటీలు మా యుటిలిటీస్ 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,
      ),
    ),