फ्लेक्स-डायरेक्शन गुण

flex-direction गुण मुख्य और क्रॉस अक्ष की दिशा स्थापित करता है या, दूसरे शब्दों में कहें तो, तत्वों को एक पंक्ति या कॉलम में व्यवस्थित करता है।

फ्लेक्स ब्लॉक्स के लिए पैरेंट एलिमेंट पर लागू होता है। शॉर्टहैंड प्रॉपर्टी flex-flow का हिस्सा है।

सिंटैक्स

सिलेक्टर {
	flex-direction: row | row-reverse | column | column-reverse;
}

मान

मान	विवरण
`row`	मुख्य अक्ष बाएं से दाएं की ओर निर्देशित होती है। तत्व एक पंक्ति में व्यवस्थित होते हैं, डिफ़ॉल्ट रूप से बाएं किनारे से चिपके होते हैं, उनकी संख्या का सामान्य क्रम होता है - बाएं से दाएं।
`row-reverse`	मुख्य अक्ष दाएं से बाएं की ओर निर्देशित होती है। तत्व एक पंक्ति में व्यवस्थित होते हैं, डिफ़ॉल्ट रूप से दाएं किनारे से चिपके होते हैं, उनकी संख्या का उल्टा क्रम होता है - दाएं से बाएं।
`column`	मुख्य अक्ष ऊपर से नीचे की ओर निर्देशित होती है। तत्व एक कॉलम में व्यवस्थित होते हैं, डिफ़ॉल्ट रूप से ऊपर से चिपके होते हैं, उनकी संख्या का सामान्य क्रम होता है - ऊपर से नीचे।
`column-reverse`	मुख्य अक्ष नीचे से ऊपर की ओर निर्देशित होती है। तत्व एक कॉलम में व्यवस्थित होते हैं, डिफ़ॉल्ट रूप से नीचे से चिपके होते हैं, उनकी संख्या का उल्टा क्रम होता है - नीचे से ऊपर।

डिफ़ॉल्ट मान: row.

उदाहरण

तत्व एक पंक्ति में व्यवस्थित हैं, डिफ़ॉल्ट रूप से बाएं किनारे से चिपके हैं, उनकी संख्या का सामान्य क्रम है - बाएं से दाएं:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

उदाहरण . row-reverse मान

तत्व एक पंक्ति में व्यवस्थित हैं, डिफ़ॉल्ट रूप से दाएं किनारे से चिपके हैं, उनकी संख्या का उल्टा क्रम है - दाएं से बाएं:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

उदाहरण . column मान

तत्व एक कॉलम में व्यवस्थित हैं, डिफ़ॉल्ट रूप से ऊपर से चिपके हैं, उनकी संख्या का सामान्य क्रम है - ऊपर से नीचे:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

उदाहरण . column-reverse मान

तत्व एक कॉलम में व्यवस्थित हैं, डिफ़ॉल्ट रूप से नीचे से चिपके हैं, उनकी संख्या का उल्टा क्रम है - नीचे से ऊपर:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

यह भी देखें

justify-content गुण,
जो मुख्य अक्ष के साथ संरेखण निर्धारित करता है
align-items गुण,
जो क्रॉस अक्ष के साथ संरेखण निर्धारित करता है
flex-wrap गुण,
जो फ्लेक्स ब्लॉक्स की मल्टीलाइन क्षमता निर्धारित करता है
flex-flow गुण,
flex-direction और flex-wrap के लिए शॉर्टहैंड
order गुण,
जो फ्लेक्स ब्लॉक्स का क्रम निर्धारित करता है
align-self गुण,
जो एक ब्लॉक का संरेखण निर्धारित करता है
flex-basis गुण,
जो किसी विशिष्ट फ्लेक्स ब्लॉक का आकार निर्धारित करता है
flex-grow गुण,
जो फ्लेक्स ब्लॉक्स की विस्तार क्षमता निर्धारित करता है
flex-shrink गुण,
जो फ्लेक्स ब्लॉक्स की संकुचन क्षमता निर्धारित करता है
flex गुण,
flex-grow, flex-shrink और flex-basis के लिए शॉर्टहैंड