CSS में मुख्य अक्ष के साथ फ्लेक्स तत्वों का संरेखण

justify-content गुण तत्वों को मुख्य अक्ष के साथ संरेखित करने की अनुमति देता है। पहले आपने center, space-between, space-around, space-evenly मान पहले ही पढ़ लिए हैं। आइए अब कुछ और मानों का अध्ययन करें।

flex-start मान तत्वों को मुख्य अक्ष की शुरुआत में लगाता है, और flex-end मान - अंत में। आइए उदाहरणों पर नजर डालें।

उदाहरण

मुख्य अक्ष को बाएं से दाएं निर्देशित करते हैं, flex-direction गुण को row मान देकर। ब्लॉकों को अक्ष की शुरुआत में लगाएं। इसके लिए justify-content को flex-start मान पर सेट करें:

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

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

उदाहरण

आइए अब ब्लॉकों को अक्ष के अंत में लगाएं। इसके लिए justify-content को flex-end मान पर सेट करें:

css.parent {
  display: flex;
  flex-direction: row; /* मुख्य अक्ष बाएं से दाएं */
  justify-content: flex-end; /* ब्लॉक मुख्य अक्ष के अंत में */
}

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

उदाहरण

अब मुख्य अक्ष को दाएं से बाएं निर्देशित करते हैं, flex-direction गुण को row-reverse मान देकर। ब्लॉकों को अक्ष की शुरुआत में, यानी दाएं किनारे पर लगाएं। इसके लिए justify-content को flex-start मान पर सेट करें:

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

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

उदाहरण

और अब ब्लॉकों को मुख्य अक्ष के अंत में, यानी बाएं किनारे पर लगाएं। इसके लिए justify-content को flex-end मान पर सेट करें:

css.parent {
  display: flex;
  flex-direction: row-reverse; /* मुख्य अक्ष दाएं से बाएं */
  justify-content: flex-end; /* ब्लॉक मुख्य अक्ष के अंत में */
}

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

उदाहरण

पिछले उदाहरणों में मुख्य अक्ष क्षैतिज रूप से निर्देशित थी। आइए अब इसे पलटें और इसे लंबवत निर्देशित करें।

मुख्य अक्ष को नीचे की ओर निर्देशित करते हैं, flex-direction गुण को column मान देकर।

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

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

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

उदाहरण

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

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

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

उदाहरण

मुख्य अक्ष को पलटें, इसे नीचे से ऊपर की ओर निर्देशित करें। इसके लिए flex-direction गुण को column-reverse मान दें। इस स्थिति में ब्लॉक अपना क्रम बदल देंगे - अक्ष की शुरुआत में HTML कोड में अंतिम ब्लॉक खड़ा होगा।

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

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

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

उदाहरण

आइए ब्लॉकों को मुख्य अक्ष के अंत में, यानी ऊपरी किनारे पर लगाएं। इसके लिए justify-content को flex-end मान पर सेट करें:

css.parent {
  display: flex;
  flex-direction: column-reverse; /* मुख्य अक्ष नीचे से ऊपर */
  justify-content: flex-end; /* ब्लॉक मुख्य अक्ष के अंत में */
}

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

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