CSS ఫ్లెక్స్‌బాక్స్
- 上一页 CSS బాక్స్ సైజింగ్
- 下一页 CSS మీడియా క్వరీ
CSS ఫ్లెక్స్‌బాక్స్ లేఆఉట్ మోడ్యూల్
ఫ్లెక్స్‌బాక్స్ లేఆఉట్ మోడ్యూల్ (వచ్చినప్పటి వరకు), అందుబాటులో ఉన్న సమయానికి ఉపయోగించబడుతున్న లేఆఉట్ మోడ్యూల్స్ నాలుగు ఉన్నాయి:
- బ్లాక్, వెబ్‌లో కొంతము ఉపయోగించబడుతుంది (సెక్షన్‌లు)
- ఇన్‌లైన్, టెక్స్ట్ కొరకు ఉపయోగించబడుతుంది
- టేబుల్, ద్విఅక్షాసిక పదార్థాలకు ఉపయోగించబడుతుంది
- పోజిషన్, ఎలమెంట్స్ ప్రత్యేక స్థానానికి ఉపయోగించబడుతుంది
ఫ్లెక్స్‌బాక్స్ లేఆఉట్ మోడ్యూల్, ఫ్లోటింగ్ లేదా పోజిషనింగ్ వినియోగించకుండా సులభంగా వివిధ రెస్పాన్సివ్ లేఆఉట్ స్ట్రక్చర్స్ డిజైన్ చేయవచ్చు.
బ్రౌజర్ మద్దతు
అన్ని ఆధునిక బ్రౌజర్లు మద్దతు ఇస్తాయి ఫ్లెక్స్‌బాక్స్ అమరికలు.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
ఫ్లెక్స్‌బాక్స్ ఎలమెంట్స్
ఫ్లెక్స్‌బాక్స్ మోడల్‌ను ఉపయోగించడానికి మీరు ముందుగా ఫ్లెక్స్ కంటైనర్‌ను నిర్వచించవలసివుంది.
上面的元素表示一个带有三个 flex 项目的 flex 容器（蓝色区域）。
实例
含有三个 flex 项目的 flex 容器：
<div class="flex-container"> <div>1</div>2<div>3</div> </div>
父元素（容器）
通过将 display 属性设置为 flex，flex 容器将可伸缩：
实例
.flex-container {
display: flex;
}
以下是 flex 容器属性：
flex-direction అట్రిబ్యూట్
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
实例
column 值设置垂直堆叠 flex 项目（从上到下）：
.flex-container {
display: flex;
flex-direction: column;
}
实例
column-reverse 值垂直堆叠 flex 项目（但从下到上）：
.flex-container {
display: flex;
flex-direction: column-reverse;
}
实例
row 值水平堆叠 flex 项目（从左到右）：
.flex-container {
display: flex;
flex-direction: row;
}
实例
row-reverse 值水平堆叠 flex 项目（但从右到左）：
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap అట్రిబ్యూట్
flex-wrap 属性规定是否应该对 flex 项目换行。
下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。
实例
wrap 值规定 flex 项目将在必要时进行换行：
.flex-container {
display: flex;
flex-wrap: wrap;
}
实例
nowrap 值规定将不对 flex 项目换行（默认）：
.flex-container {
display: flex;
flex-wrap: nowrap;
}
实例
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow అట్రిబ్యూట్
flex-flow అనువర్తనం ఫ్లెక్స్-డయరెక్షన్ మరియు ఫ్లెక్స్-వ్రాప్ అనువర్తనాలను ఒకేసారి సెట్ చేయడానికి ఉపయోగిస్తారు సరళ అనువర్తనం.
实例
.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content అట్రిబ్యూట్
justify-content అనువర్తనం ఫ్లెక్స్ ప్రాజెక్ట్స్ ను పెట్టడానికి ఉపయోగిస్తారు:
实例
center విలువ ఫ్లెక్స్ ప్రాజెక్ట్స్ ను కన్నుముట్టును మధ్యన పెట్టడానికి ఉపయోగిస్తారు:
.flex-container {
display: flex;
justify-content: center;
}
实例
flex-start విలువ ఫ్లెక్స్ ప్రాజెక్ట్స్ ను కన్నుముట్టును ముందున పెట్టడానికి ఉపయోగిస్తారు (అప్రమేయం):
.flex-container {
display: flex;
justify-content: flex-start;
}
实例
flex-end విలువ ఫ్లెక్స్ ప్రాజెక్ట్స్ ను కన్నుముట్టును ముగింపున పెట్టడానికి ఉపయోగిస్తారు:
.flex-container {
display: flex;
justify-content: flex-end;
}
实例
space-around విలువ పంక్తుల ముందు, మధ్య మరియు తరువాత అంతరం ఉన్న ఫ్లెక్స్ ప్రాజెక్ట్స్ నిరూపిస్తుంది:
.flex-container {
display: flex;
justify-content: space-around;
}
实例
space-between విలువ పంక్తుల మధ్య అంతరం ఉన్న ఫ్లెక్స్ ప్రాజెక్ట్స్ నిరూపిస్తుంది:
.flex-container {
display: flex;
justify-content: space-between;
}
align-items అట్రిబ్యూట్
align-items అనువర్తనం ఫ్లెక్స్ ప్రాజెక్ట్స్ ను ప్రాంతంలో ప్రాంతంలో పెట్టడానికి ఉపయోగిస్తారు.
ఈ ఉదాహరణలలో, మేము 200 పిక్సెల్స్ ఎత్తు కన్నుముట్టును వాడుతున్నాము, అలాగే align-items అనునది అనువర్తనం మంచి ప్రదర్శన కోసం.
实例
center 值将 flex 项目在容器中间对齐：
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
实例
flex-start విలువలు ఫ్లెక్స్ ప్రాజెక్ట్స్ కంటైనర్ యొక్క ప్రారంభంలో సరిపోల్చబడతాయి:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
实例
flex-end విలువలు ఫ్లెక్స్ ప్రాజెక్ట్స్ కంటైనర్ యొక్క ముగింపులో సరిపోల్చబడతాయి:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
实例
stretch విలువలు ఫ్లెక్స్ ప్రాజెక్ట్స్ ను కంటైనర్ ను భర్తీ చేయటానికి విస్తరిస్తాయి (డిఫాల్ట్):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
实例
baseline విలువలు ఫ్లెక్స్ ప్రాజెక్ట్స్ బేస్ లైన్స్ పై సరిపోల్చబడతాయి:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
ముందుకు పార్టు కావలసిన విషయం ఈ క్రింద ప్రకటించబడింది:ఈ ఉదాహరణలో మేము పిల్లలను వివిధ font-size వినియోగించి టెక్స్ట్ బేస్ లైన్స్ పై పిల్లలను సరిపోల్చటానికి చేస్తాము:
align-content అట్రిబ్యూట్
align-content అమర్తుకు ఫ్లెక్స్ లైన్స్ ను సరిపోల్చటానికి వినియోగించే అమర్తు పరిమితి.
ఈ ఉదాహరణలో మేము 600 పిక్సెల్స్ అడుగున కంటైనర్స్ ను వాడి, మరియు flex-wrap పరిమితిని wrap చేసి అలాయిన్-కంటైనర్ అమర్తుకు మరియు అలాయిన్-కంటైనర్ అమర్తుకు చిత్రణ చేస్తున్నాము.
实例
space-between విలువలు ఫ్లెక్స్ లైన్స్ మధ్య సమాన అంతరాలతో చూపిస్తాయి:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
实例
space-around విలువలు ఫ్లెక్స్ లైన్స్ ముందు, మధ్య మరియు తర్వాతని విభజించి చూపిస్తాయి:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
实例
stretch విలువలు ఫ్లెక్స్ లైన్స్ ను పూర్తి అంతరాన్ని పాలుపంచుకునేందుకు విస్తరిస్తాయి (డిఫాల్ట్):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
实例
center విలువలు కంటైనర్ యొక్క మధ్యలో ఫ్లెక్స్ లైన్స్ చూపిస్తాయి:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
实例
flex-start విలువలు కంటైనర్ యొక్క ప్రారంభంలో ఫ్లెక్స్ లైన్స్ చూపిస్తాయి:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
实例
flex-end విలువలు కంటైనర్ యొక్క ముగింపులో ఫ్లెక్స్ లైన్స్ చూపిస్తాయి:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
పరిపూర్ణ సెంటర్
ఈ ఉదాహరణలో మేము ఒక చాలా సాధారణ స్టైలింగ్ సమస్యను పరిష్కరిస్తాము: పరిపూర్ణ సెంటర్.
పరిష్కారం: ఈ కి సంబంధించిన విషయం నివేదిస్తుంది: justify-content మరియు align-items అమర్తుకు స్థానాన్ని సెంటర్ చేసిన తర్వాత ఫ్లెక్స్ ప్రాజెక్ట్స్ పరిపూర్ణంగా సెంటర్ అవుతాయి:
实例
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
పిల్లలు (ప్రాజెక్ట్స్)
ఫ్లెక్స్ కంటైనర్ యొక్క ప్రత్యక్ష సంబంధిత సంకలనాలు స్వయంచాలకంగా ఫ్లెక్స్ ప్రాజెక్ట్స్ అవుతాయి。
పైని అంశం ఒక గ్రే స్పందనాత్మక కంటైనర్ లోని నాలుగు బ్లూ స్పందనాత్మక ప్రాజెక్టులను ప్రతినిధీకరిస్తుంది.
实例
<div class="flex-container"> <div>1</div>2<div>3</div> <div>4</div> </div>
స్పందనాత్మక ప్రాజెక్టులకు ఉపయోగపడే అంశాలు ఇంకా ఉన్నాయి:
orderflex-growflex-shrinkflex-basisflexalign-self
order అంశం
order అంశం ఫ్లెక్ ప్రాజెక్టుల క్రమాన్ని నియమిస్తుంది.
కోడులో మొదటి ఫ్లెక్ ప్రాజెక్టు సజ్జీకరణలో మొదటి అంశంగా ప్రదర్శించబడకూడదు.
order ఈ విలువ అంకితమైన సంఖ్యగా ఉండాలి, అప్రమేయ విలువ 0.
实例
order అంశం ఫ్లెక్ ప్రాజెక్టుల క్రమాన్ని మార్చవచ్చు:
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow అంశం
flex-grow అంశం ఫ్లెక్ ప్రాజెక్టు ఇతర ఫ్లెక్ ప్రాజెక్టులకు పెరగండి పరిమాణాన్ని నియమిస్తుంది.
ఈ విలువ అంకితమైన సంఖ్యగా ఉండాలి, అప్రమేయ విలువ 0.
实例
మూడవ స్పందనాత్మక ప్రాజెక్టును ఇతర స్పందనాత్మక ప్రాజెక్టులకు కంటే ఎనిమిది రెట్లు వేగంగా పెరగండి:
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
flex-shrink అంశం
flex-shrink అంశం ఫ్లెక్ ప్రాజెక్టు ఇతర ఫ్లెక్ ప్రాజెక్టులకు కుదించే పరిమాణాన్ని నియమిస్తుంది.
ఈ విలువ అంకితమైన సంఖ్యగా ఉండాలి, అప్రమేయ విలువ 0.
实例
మూడవ స్పందనాత్మక ప్రాజెక్టును ఇతర స్పందనాత్మక ప్రాజెక్టులతో అదే విధంగా కుదించకూడదు:
<div class="flex-container"> <div>1</div>2<div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex-basis అంశం
flex-basis అంశం ఫ్లెక్ ప్రాజెక్టుల ప్రారంభ పొడవును నియమిస్తుంది.
实例
మూడవ స్పందనాత్మక ప్రాజెక్టును ప్రారంభ పొడవు 200 పిక్సెల్స్ గా నియమిస్తుంది:
<div class="flex-container"> <div>1</div>2<div style="flex-basis: 200px">3</div> <div>4</div> </div>
flex అంశం
flex ఈ అంశం ఫ్లెక్‌గ్రో, ఫ్లెక్‌ష్రింక్ మరియు ఫ్లెక్‌బేసిస్ అంశాల సరళీకృత రూపం.
实例
మూడవ స్పందనాత్మక ప్రాజెక్టును పెరగకూడదు (0), కుదించకూడదు (0), మరియు ప్రారంభ పొడవు 200 పిక్సెల్స్ గా ఉంచండి:
<div class="flex-container"> <div>1</div>2<div style="flex: 0 0 200px">3</div> <div>4</div> </div>
align-self అంశం
align-self అంశం నియమం స్పందనాత్మక కంటైనర్ లో ఎంచుకున్న ప్రాజెక్టుల అనుసంధానం నియమిస్తుంది.
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。
在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：
实例
把第三个弹性项目对齐到容器的中间：
<div class="flex-container"> <div>1</div>23<div>4</div> </div>
实例
将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
ఫ్లెక్స్‌బాక్స్‌తో ప్రతిస్పందకత ఉన్న ఇమేజ్ లైబ్రరీ
ఫ్లెక్స్‌బాక్స్‌తో ప్రతిస్పందకత ఉన్న ఇమేజ్ లైబ్రరీని సృష్టించండి, దీనిలో స్క్రీన్ పైన నాలుగు, రెండు లేదా పూర్తి వెడల్పు చిత్రాల మధ్య మార్చుతుంది:
ఫ్లెక్స్‌బాక్స్‌తో ప్రతిస్పందకత ఉన్న వెబ్‌సైట్
ఫ్లెక్స్‌బాక్స్‌తో ప్రతిస్పందకత ఉన్న వెబ్‌సైట్లను సృష్టించండి, దీనిలో ఫ్లెక్సిబిలిటీ నేవిగేషన్ మరియు ఫ్లెక్సిబిలిటీ కంటైనర్లు ఉన్నాయి:
CSS Flexbox గుణాలు
ఫ్లెక్స్‌బాక్స్‌తో కలిసి ఉపయోగించే సిఎస్ఎస్ గుణాలను ఈ పట్టిక లిస్టుచున్నది:
| గుణం | వివరణ |
|---|---|
| display | హెచ్‌టిఎమ్ఎల్ ఎలమెంట్స్ కు ఉపయోగించే బాక్స్ రకం నిర్ణయిస్తుంది. |
| flex-direction | ఫ్లెక్సిబిలిటీ కంటైనర్ లో ఫ్లెక్సిబిలిటీ ప్రాజెక్టుల దిశను నిర్ణయిస్తుంది. |
| justify-content | ఫ్లెక్సిబిలిటీ ప్రాజెక్టులు ముఖ్య అక్షంపై అన్ని లభించిన స్థలాన్ని వాడకపోతే వాటిని హొరిజంటల్‌గా అనుకూలీకరిస్తుంది. |
| align-items | ఫ్లెక్సిబిలిటీ ప్రాజెక్టులు ముఖ్య అక్షంపై అన్ని లభించిన స్థలాన్ని వాడకపోతే వాటిని ఉన్నతంగా అనుకూలీకరిస్తుంది. |
| flex-wrap | ఫ్లెక్సిబిలిటీ ప్రాజెక్టులను మార్గాన్ని మార్చుకుంటుంది. ఫ్లెక్స్ లైన్ లో వాటికి సంపూర్ణంగా స్థలం లేకపోతే వాటిని మార్గాన్ని మార్చుతుంది. |
| align-content | flex-wrap గుణం ప్రవర్తనను మార్చుతుంది. align-items పోలి, కానీ ఫ్లెక్సిబిలిటీ ప్రాజెక్టులను అనుకూలీకరించకుండా ఫ్లెక్స్ లైన్ ను అనుకూలీకరిస్తుంది. |
| flex-flow | flex-direction మరియు flex-wrap గుణాల లఘువైన గుణం. |
| order | ఫ్లెక్సిబిలిటీ ప్రాజెక్టులను ఒకే కంటైనర్ లోని ఇతర ఫ్లెక్సిబిలిటీ ప్రాజెక్టులకు సంబంధించిన క్రమాన్ని నిర్ణయిస్తుంది. |
| align-self | ఫ్లెక్సిబిలిటీ ప్రాజెక్టులకు ఉపయోగిస్తారు. కంటైనర్ యొక్క align-items గుణాన్ని పరిగణనలోకి తీసుకువస్తుంది. |
| flex | flex-grow, flex-shrink మరియు flex-basis గుణం లఘువైన గుణం. |
- 上一页 CSS బాక్స్ సైజింగ్
- 下一页 CSS మీడియా క్వరీ
