CSS में क्रॉस एक्सिस के साथ फ्लेक्स ब्लॉक्स का संरेखण

आइए अब ब्लॉक्स को क्रॉस एक्सिस के साथ भी संरेखित करें। इस अक्ष के साथ संरेखण align-items गुण द्वारा निर्धारित किया जाता है। मान flex-start तत्वों को अक्ष की शुरुआत में लगाता है, और मान flex-end - अंत में।

आइए उदाहरणों के साथ प्रयास करें।

उदाहरण

आइए मुख्य अक्ष को बाएं से दाएं निर्देशित करें। इसमें मामला क्रॉस एक्सिस ऊपर से नीचे की ओर निर्देशित होगी। आइए अपने ब्लॉक्स के स्थान को मुख्य अक्ष और क्रॉस अक्ष दोनों के साथ समायोजित करें।

मुख्य अक्ष के साथ, ब्लॉक्स को उसकी शुरुआत में लगाएं, यानी बाएं किनारे पर। इसके लिए justify-content को flex-start मान पर सेट करें। क्रॉस एक्सिस के साथ, ब्लॉक्स को उसकी शुरुआत में भी लगाएं, यानी शीर्ष किनारे पर। इसके लिए align-items को भी flex-start मान पर सेट करें।

आइए देखें कि हमें क्या मिलता है:

css.parent {
  display: flex;
  flex-direction:  row;        /* मुख्य अक्ष दाएं, क्रॉस एक्सिस नीचे */
  justify-content: flex-start; /* ब्लॉक्स मुख्य अक्ष की शुरुआत में */
  align-items:     flex-start; /* ब्लॉक्स क्रॉस एक्सिस की शुरुआत में */
}

कोड निष्पादन का परिणाम:

उदाहरण

आइए अब ब्लॉक्स को क्रॉस एक्सिस के अंत में लगाएं, यानी नीचे। इसके लिए align-items को flex-end मान पर सेट करें:

css.parent {
  display: flex;
  flex-direction:  row;        /* मुख्य अक्ष दाएं, क्रॉस एक्सिस नीचे */
  justify-content: flex-start; /* ब्लॉक्स मुख्य अक्ष की शुरुआत में */
  align-items:     flex-end;   /* ब्लॉक्स क्रॉस एक्सिस के अंत में */
}

कोड निष्पादन का परिणाम:

उदाहरण

आइए अब मुख्य अक्ष को ऊपर से नीचे की ओर निर्देशित करें। चूंकि मुख्य अक्ष ऊर्ध्वाधर है, तो क्रॉस एक्सिस दाएं से बाएं निर्देशित होगी। आइए ब्लॉक्स को दोनों अक्षों के साथ उनकी शुरुआत में लगाएं:

css.parent {
  display: flex;
  flex-direction:  column;     /* मुख्य अक्ष नीचे, क्रॉस एक्सिस दाएं */
  justify-content: flex-start; /* ब्लॉक्स मुख्य अक्ष की शुरुआत में */
  align-items:     flex-start; /* ब्लॉक्स क्रॉस एक्सिस की शुरुआत में */
}

कोड निष्पादन का परिणाम:

उदाहरण

और अब क्रॉस एक्सिस के साथ ब्लॉक्स को उसके अंत में लगाएं:

css.parent {
  display: flex;
  flex-direction:  column;     /* मुख्य अक्ष नीचे, क्रॉस एक्सिस दाएं */
  justify-content: flex-start; /* ब्लॉक्स मुख्य अक्ष की शुरुआत में */
  align-items:     flex-end;   /* ब्लॉक्स क्रॉस एक्सिस के अंत में */
}

कोड निष्पादन का परिणाम:

उदाहरण

आइए ब्लॉक्स को दोनों अक्षों के अंत में लगाएं:

css.parent {
  display: flex;
  flex-direction:  column;   /* मुख्य अक्ष नीचे, क्रॉस एक्सिस दाएं */
  justify-content: flex-end; /* ब्लॉक्स मुख्य अक्ष के अंत में */
  align-items:     flex-end; /* ब्लॉक्स क्रॉस एक्सिस के अंत में */
}

कोड निष्पादन का परिणाम:

उदाहरण

आइए मुख्य अक्ष की दिशा बदलें - इसे नीचे से ऊपर की ओर निर्देशित करें। इसमें क्रॉस एक्सिस अपनी दिशा नहीं बदलेगी, क्योंकि मुख्य अक्ष अभी भी ऊर्ध्वाधर है।

आइए ब्लॉक्स को दोनों अक्षों की शुरुआत में लगाएं:

css.parent {
  display: flex;
  flex-direction:  column-reverse; /* मुख्य अक्ष ऊपर, क्रॉस एक्सिस दाएं */
  justify-content: flex-start;     /* ब्लॉक्स मुख्य अक्ष की शुरुआत में */
  align-items:     flex-start;     /* ब्लॉक्स क्रॉस एक्सिस की शुरुआत में */
}

कोड निष्पादन का परिणाम:

व्यावहारिक कार्य