Bootstrap 5 Flex

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

亲自试一试

హోరిజంటల్ దిశ

ఉపయోగించండి .flex-row స్పందనాత్మక ప్రాజెక్టులను హోరిజంటల్ గా (పరస్పరం పక్కపక్క) చూపించండి. ఇది మూల సెట్టింగ్.

హిందూస్థాన్ ప్రభుత్వం ప్రాంతీయ భాషల ఉపయోగం గురించి సలహా:స్వయంచాలక మార్జిన్ .flex-row-reverse స్పందనాత్మక ప్రాజెక్టులను హోరిజంటల్ గా కుడివైపు సిద్ధం చేయవచ్చు:

实例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

పరపంచం

ఉపయోగించండి .flex-column స్పందనాత్మక ప్రాజెక్టులను పరపంచంగా చూపించండి (పరస్పరం మొక్కలు), లేదా ఉపయోగించండి: .flex-column-reverse పెద్దది నుండి చిన్నది వరకు విద్యుత్తు దిశను మార్చు:

实例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

సమాచారాన్ని జోడించండి

స్వయంచాలక మార్జిన్ .justify-content-* క్లాసులు స్పందనాత్మక ప్రాజెక్టుల ప్రత్యేకతను మార్చవచ్చు. చెల్లుబాటు లాబికలు ఇవి ఉన్నాయి:

• start（默认）
• end
• center
• between
• around

实例

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

亲自试一试

అదృష్టపూర్వకంగా అంతరం

హిందూస్థాన్ ప్రభుత్వం ప్రాంతీయ భాషల ఉపయోగం గురించి సలహా: .flex-fill వాటిని అదృష్టపూర్వకంగా అంతరానికి సిద్ధం చేయవచ్చు:

实例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">స్పందనాత్మక ప్రాజెక్టు 1</div>
  <div class="p-2 bg-warning flex-fill">స్పందనాత్మక ప్రాజెక్టు 2</div>
  <div class="p-2 bg-primary flex-fill">స్పందనాత్మక ప్రాజెక్టు 3</div>

విస్తరించు

హిందూస్థాన్ ప్రభుత్వం ప్రాంతీయ భాషల ఉపయోగం గురించి సలహా: .flex-grow-1 అదనపు స్థలాన్ని ఉపయోగించవచ్చు. ఈ ఉదాహరణలో, మొదటి రెండు flex ప్రాజెక్టులు అవసరమైన స్థలాన్ని పాలించాయి, మరియు చివరి ప్రాజెక్టు మిగిలిన అందుబాటులోని స్థలాన్ని పాలించింది:

实例

<div class="d-flex">
  <div class="p-2 bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary flex-grow-1">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

顺序

స్వయంచాలక మార్జిన్ అవసరపడినప్పుడు సక్రియంగా సంకుచించవచ్చు. .order

实例

<div class="d-flex bg-secondary">
  క్లాస్లు ఫ్లెక్సిబుల్ ప్రాజెక్టు యొక్క దృశ్యపరమైన క్రమాన్ని మార్చవచ్చు. చెల్లుబాటు క్లాస్లు 0 నుండి 5 వరకు ఉన్నాయి, ఎక్కువ సంఖ్యకు అధిక ప్రాధాన్యత ఉంది (order-1 అనేది order-2 కంటే ముందు చూపబడుతుంది మొదలు కాగలదు):
  <div class="p-2 bg-info order-3">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning order-2">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>

<div class="p-2 bg-primary order-1">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

స్వయంచాలక మార్జిన్ .ms-auto（ప్రాజెక్ట్ను కుడికి కదిలించడానికి ఉపయోగిస్తారు）లేదా ఉపయోగించవచ్చు .me-auto（ప్రాజెక్ట్ను ఎడమకు కదిలించడానికి ఉపయోగిస్తారు）ఫ్లెక్సిబుల్ ప్రాజెక్టులకు స్వయంచాలక మార్జిన్స్ జోడించడానికి సులభంగా ఉపయోగించవచ్చు:

实例

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 1</div>
  <div class="p-2 bg-warning">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 2</div>
  <div class="p-2 bg-primary">ఫ్లెక్సిబుల్ ప్రాజెక్ట్ 3</div>

మార్చుకున్నారు

ద్వారా .flex-nowrap（డిఫాల్ట్）、.flex-wrap లేదా .flex-wrap-reverseఫ్లెక్స్ ప్రాజెక్ట్లను ఫ్లెక్స్ కంటైనర్లో ఎలా వేపటించాలో నియంత్రిస్తుంది.

实例

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

亲自试一试

సమాచారాన్ని జోడించండి

ఉపయోగించండి .align-content-* క్లాస్ ఫ్లెక్సిబుల్ ప్రాజెక్ట్ల వాల్యూమ్ అలైన్ మేక్ వే. చెల్లుబాటు క్లాస్లు ఉన్నాయి:

• .align-content-start（默认）
• .align-content-end
• .align-content-center
• .align-content-between
• .align-content-around
• .align-content-stretch

పేర్కొనుట:ఈ క్లాసులు ఒక పదవీ పట్టిక సామర్థ్యాలపై ప్రభావం లేదు.

క్రింది బటన్ ను నొక్కండి, సామర్థ్య ప్రాంతాల ప్రాప్యతలను మార్చి ఐదు క్లాసుల మధ్య తేడాను చూడండి:

实例

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

亲自试一试

అంశాలను జోడించండి

ఉపయోగించండి .align-items-* క్లాస్ నియంత్రణఒక పదవీ పట్టికసామర్థ్య ప్రాంతాల ప్రాప్యతలు. చెల్లునట్టి క్లాసులు ఉన్నాయి:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-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-self-* క్లాస్ నియంత్రణప్రత్యక్ష సామర్థ్యాలు నిర్దేశించండియొక్క ప్రాంతాల ప్రాప్యతలు రూపకల్పన మేరకు.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（默认）

单击下面的按钮查看五个类之间的区别：

实例

  
Flex item 1
  
Flex item 2
  
Flex item 3

亲自试一试

ప్రతిస్పందక ఫ్లెక్స్ క్లాస్

అన్ని ఫ్లెక్సిబుల్ క్లాస్‌లు అదనపు ప్రతిస్పందక క్లాస్‌లను కలిగి ఉంటాయి మరియు చిన్న స్క్రీన్‌ల పై ఫ్లెక్స్ క్లాస్‌ను సెట్ చేయడానికి సులభం చేస్తుంది.

* సింహాసనం స్మ్, మిడ్, లగ్, ఎక్స్‌ల్, లేదా ఎక్స్‌ల్‌ఎక్స్‌ల్‌ను బదిలీ చేయవచ్చు మరియు చిన్న, మధ్యం, పెద్ద, అధిక పెద్ద మరియు అతి పెద్ద స్క్రీన్‌లను ప్రతినిధీకరిస్తుంది.

ప్రత్యేక ఫ్లెక్సిబుల్ క్లాస్‌ను శోధించండి ..

CodeW3C.com అందించే విషయాలు శిక్షణ మరియు పరీక్షకు ఉపయోగపడతాయి, విషయాల నిజత్వాన్ని హామీ ఇవ్వబడదు. ఈ సైట్ విషయాలను ఉపయోగించడం ద్వారా వచ్చే ప్రమాదాలు ఈ సైట్ తో సంబంధం లేదు. అధికారం మరియు అన్ని హక్కులు సంరక్షించబడతాయి.

గురించి CodeW3C.com సహాయం CodeW3C.com ఉపయోగ నిబంధనలు గోప్యత నిబంధనలు