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

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

ఫ్లెక్స్-డయరెక్షన్ అంశం ఫ్లెక్స్ ప్రాణికాల దిశను నిర్ణయిస్తుంది.

పేర్కొనుట:సాధారణ ప్రాణికం కాకపోతే ఫ్లెక్స్ అంశం లోపమవుతుంది.

ఇంకా చూడండి:

CSS శిక్షణ పత్రికCSS ఫ్లెక్స్ బాక్స్

CSS పరిశీలన పత్రికflex లక్షణం

CSS పరిశీలన పత్రికflex-basis లక్షణం

CSS పరిశీలన పత్రికflex-flow లక్షణం

CSS పరిశీలన పత్రికflex-grow లక్షణం

CSS పరిశీలన పత్రికflex-shrink లక్షణం

CSS పరిశీలన పత్రికflex-wrap లక్షణం

HTML DOM పరిశీలన పత్రికflexDirection లక్షణం

ఉదాహరణ

ఈ <div> పరికరంలో ఎలాంటి అనిమేషన్ చేయబడదు మరియు ఎలాంటి వెలుపలి లక్షణాలు లేవు అని విరుద్ధ దిశలో సెట్ చేయండి:

div {
  display: flex;
  flex-direction: row-reverse; 
}

మీరే ప్రయత్నించండి

CSS సంకేతపత్రం

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

లక్షణ విలువ

విలువ వివరణ
row మూలం రాలు మరియు ఎలాంటి అనిమేషన్ చేయబడదు మరియు ఎలాంటి వెలుపలి లక్షణాలు లేవు.
row-reverse ఈ కలన్లు కాని కానీ విరుద్ధ దిశలో ఉన్నాయి.
column కలన్లుగా ఉండి ఎలాంటి అనిమేషన్ చేయబడదు మరియు ఎలాంటి వెలుపలి లక్షణాలు లేవు.
column-reverse ఈ కలన్లు కాని కానీ విరుద్ధ దిశలో ఉన్నాయి.
initial ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. చూడండి: initial。
inherit ఈ లక్షణాన్ని తన తండ్రి పరికరం నుండి వారసత్వం చేసుకుంది. చూడండి: inherit。

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

మూలం రాలు ఈ లక్షణాన్ని తన తండ్రి పరికరం నుండి వారసత్వం చేసుకుంది. చూడండి: row
వారసత్వం: కాని
అనిమేషన్ తయారు చేయండి: మద్దతు లేదు. దయచేసి ఈ కి సంబంధించి చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు。
వెర్షన్: CSS3
JavaScript సంకేతపత్రం: object.style.flexDirection="column-reverse"

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

flex-direction మరియు మీడియా క్వరీలను కలిపి వివిధ స్క్రీన్ పరిమాణాలు/పరికరాలకు వేరే రూపకల్పనలను సృష్టించండి:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* ప్రతిస్పందకతా రూపకల్పన - రెండు గరిష్ట స్థానాలు బదులుగా ఒక గరిష్ట స్థానాన్ని తయారు చేయండి (100%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

మీరే ప్రయత్నించండి

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

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

ఈ సంఖ్యలు ముందుకు ఉన్న -webkit- లేదా -moz- ప్రత్యేకతలతో మొదటి వెర్షన్లను వాడటానికి సూచిస్తాయి。

క్రోమ్ ఐఇ / ఎంజెల్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0