ఫ్లెక్స్
రెస్పాన్సివ్ ఫ్లెక్స్బాక్స్ యుటిలిటీల పూర్తి సూట్తో గ్రిడ్ నిలువు వరుసలు, నావిగేషన్, భాగాలు మరియు మరిన్నింటి యొక్క లేఅవుట్, అమరిక మరియు పరిమాణాన్ని త్వరగా నిర్వహించండి. మరింత సంక్లిష్టమైన అమలుల కోసం, అనుకూల CSS అవసరం కావచ్చు.
ఫ్లెక్స్బాక్స్ కంటైనర్ను రూపొందించడానికి మరియు డైరెక్ట్ చిల్డ్రన్ ఎలిమెంట్లను ఫ్లెక్స్ display
ఐటెమ్లుగా మార్చడానికి యుటిలిటీలను వర్తింపజేయండి . ఫ్లెక్స్ కంటైనర్లు మరియు ఐటెమ్లు అదనపు ఫ్లెక్స్ లక్షణాలతో మరింతగా సవరించబడతాయి.
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">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
వైపు నుండి క్షితిజ సమాంతర దిశను ప్రారంభించడానికి ఉపయోగించండి.
<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>
.flex-column
నిలువు దిశను సెట్ చేయడానికి లేదా వ్యతిరేక .flex-column-reverse
వైపు నుండి నిలువు దిశను ప్రారంభించడానికి ఉపయోగించండి.
<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>
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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
ప్రధాన అక్షం (ప్రారంభించాల్సిన x-అక్షం, y-axis అయితే ) justify-content
పై ఫ్లెక్స్ అంశాల అమరికను మార్చడానికి ఫ్లెక్స్బాక్స్ కంటైనర్లపై యుటిలిటీలను ఉపయోగించండి . flex-direction: column
నుండి ఎంచుకోండి start
(బ్రౌజర్ డిఫాల్ట్), end
, center
,between
, లేదాaround
.
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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
, baseline
, లేదా stretch
(బ్రౌజర్ డిఫాల్ట్) నుండి ఎంచుకోండి .
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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
క్రాస్ యాక్సిస్ (ప్రారంభించాల్సిన y-యాక్సిస్, x-axis అయితే ) align-self
పై వాటి అమరికను వ్యక్తిగతంగా మార్చడానికి ఫ్లెక్స్బాక్స్ ఐటెమ్లపై యుటిలిటీలను ఉపయోగించండి . flex-direction: column
అదే ఎంపికల నుండి ఎంచుకోండి align-items
: start
, end
, center
, baseline
, లేదా stretch
(బ్రౌజర్ డిఫాల్ట్).
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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
మీరు ఆటో మార్జిన్లతో ఫ్లెక్స్ అలైన్మెంట్లను మిక్స్ చేసినప్పుడు Flexbox కొన్ని అద్భుతమైన పనులను చేయగలదు. ఆటో మార్జిన్ల ద్వారా ఫ్లెక్స్ ఐటమ్లను నియంత్రించడానికి మూడు ఉదాహరణలు క్రింద చూపబడ్డాయి: డిఫాల్ట్ (స్వీయ మార్జిన్ లేదు), రెండు అంశాలను కుడి వైపుకు నెట్టడం ( .mr-auto
), మరియు రెండు అంశాలను ఎడమ వైపుకు నెట్టడం ( .ml-auto
).
justify-content
దురదృష్టవశాత్తూ, IE10 మరియు IE11, పేరెంట్ నాన్-డిఫాల్ట్ విలువను కలిగి ఉన్న ఫ్లెక్స్ ఐటెమ్లపై ఆటో మార్జిన్లకు సరిగ్గా మద్దతు ఇవ్వవు . మరిన్ని వివరాల కోసం ఈ StackOverflow సమాధానాన్ని చూడండి .
<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>
align-items
, flex-direction: column
మరియు margin-top: auto
లేదా కలపడం ద్వారా ఒక ఫ్లెక్స్ అంశాన్ని నిలువుగా కంటైనర్ ఎగువన లేదా దిగువకు తరలించండి margin-bottom: auto
.
<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>
ఫ్లెక్స్ వస్తువులు ఫ్లెక్స్ కంటైనర్లో ఎలా చుట్టుతాయో మార్చండి. తో చుట్టడం లేదు (బ్రౌజర్ డిఫాల్ట్), తో .flex-nowrap
చుట్టడం .flex-wrap
లేదా రివర్స్ ర్యాపింగ్ నుండి ఎంచుకోండి .flex-wrap-reverse
.
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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">
<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>
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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
center
between
around
stretch
flex-wrap: wrap
హెడ్ అప్! ఫ్లెక్స్ వస్తువుల యొక్క ఒకే వరుసలపై ఈ ఆస్తి ప్రభావం ఉండదు.
కోసం ప్రతిస్పందించే వైవిధ్యాలు కూడా ఉన్నాయి 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