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

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

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

सिंटैक्स

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

मान

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

उदाहरण

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

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

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

Результат:

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

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

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

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

Результат:

उदाहरण . column मान

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

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

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

Результат:

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

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

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

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

Результат:

यह भी देखें