CSS ఫ్లెక్స్ అట్రిబ్యూట్

  • ముంది పేజీ filter
  • తరువాత పేజీ flex-basis

నిర్వచనం మరియు వినియోగం

ఫ్లెక్స్ ఈ స్పెసిఫికేషన్ల సరళీకృత స్పెసిఫికేషన్ ఉంది:

ఫ్లెక్స్ స్పెసిఫికేషన్ స్పాంజ్ ప్రాజెక్ట్ యొక్క స్పాంజ్ ప్రామాణిక పొడవును నిర్వచిస్తుంది.

ప్రత్యామ్నాయం:ఎల్లా అంశం స్పాంజ్ ప్రాజెక్ట్ కాదు అయితే ఫ్లెక్స్ స్పెసిఫికేషన్ అనివార్యం కాదు.

మరింత చూడండి:

శిక్షణాలుకు: CSS విక్షేపక పెట్టె

సూచన:CSS ఫ్లెక్స్‌బేసిస్ అట్రిబ్యూట్

సూచన:CSS ఫ్లెక్స్‌డిరెక్షన్ అట్రిబ్యూట్

సూచన:CSS ఫ్లెక్స్‌ఫ్లో అట్రిబ్యూట్

సూచన:CSS ఫ్లెక్స్‌గ్రో అట్రిబ్యూట్

సూచన:CSS ఫ్లెక్స్‌ష్రింక్ అట్రిబ్యూట్

సూచన:CSS ఫ్లెక్స్‌వ్రాప్ అట్రిబ్యూట్

సూచన:HTML DOM flex లక్షణం

ఉదాహరణ

అందుకు విషయం లేకుండా, అన్ని విక్షేపక ప్రాజెక్టుల పొడవులను సమానంగా చేయండి:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

స్వయంగా ప్రయత్నించండి

CSS సంకేతపత్రం

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
flex-grow సంఖ్య, ఇతర విక్షేపక ప్రాజెక్టులకు ప్రత్యర్థంగా ప్రాజెక్ట్ కొరకు పెరుగుతున్న పొడవు.
flex-shrink సంఖ్య, ఇతర విక్షేపక ప్రాజెక్టులకు ప్రత్యర్థంగా ప్రాజెక్ట్ కొరకు కనుగొనే ముందుగా కనుగొనే పొడవు.
flex-basis

ప్రాజెక్ట్ యొక్క పొడవు.

అనుమతించబడిన విలువలు: "auto", "inherit" లేదా "%", "px", "em" యొక్క ప్రమాణాలు లేదా మరే ఇతర ప్రమాణాలు.
auto అదే 1 1 auto.
initial అదే 0 1 auto. చూడండి: initial.
none అదే 0 0 auto.
inherit తన పేర్పాటు నుండి ఈ లక్షణాన్ని పారంతర్యం చేసుకుంటుంది. చూడండి: inherit.

సాంకేతిక వివరాలు

మూల విలువ: 0 1 auto
పారంతర్యం: లేదు
అనిమేషన్ తయారు చేయండి: మద్దతు. వేర్వేరు లక్షణలను చూడండి. చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
వర్షన్: CSS3
JavaScript సంకేతపత్రం: object.style.flex="1"

మరిన్ని ఉదాహరణలు

వివిధ స్క్రీన్ పరిమాణాలు/పరికరాల కోసం వివిధ సంరచనలను తయారు చేయడానికి flex మరియు మీడియా వినియోగించండి:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* ప్రతిస్పందక సంరచన - రెండు నిలువులు (50%) కి బదులుగా ఒక నిలువు (100%) సంరచనను తయారు చేయండి */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

స్వయంగా ప్రయత్నించండి

బ్రౌజర్ మద్దతు

ఈ పట్టికలో సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను పేర్కొన్నాయి.

ఈ సంఖ్యలు ముందుగా ఉపయోగించబడిన ప్రత్యేకతలు ఉన్న ప్రథమ సంస్కరణలను సూచిస్తాయి.

క్రోమ్ ఐఇ / ఎంజె ఫైర్‌ఫాక్స్ సఫారీ ఓపెరా
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • ముంది పేజీ filter
  • తరువాత పేజీ flex-basis