संपत्ति align-content

संपत्ति align-content फ्लेक्स ब्लॉक्स के लिए क्रॉस अक्ष के साथ और ग्रिड के लिए लंबवत अक्ष के साथ तत्वों को संरेखित करती है। यह मूल तत्व पर लागू होती है।

सिंटैक्स

cssसिलेक्टर {
  align-content: flex-start | flex-end | center | space-between | space-around;
}

मान

उदाहरण . मान flex-start

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

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

css#parent {
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . मान flex-end

इस उदाहरण में ब्लॉक क्रॉस अक्ष के निचले किनारे से दबे हुए हैं, क्योंकि संपत्ति align-content का मान flex-end पर सेट है:

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

css#parent {
  display: flex;
  align-content: flex-end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

उदाहरण . मान center

अब ब्लॉक क्रॉस अक्ष के केंद्र में संरेखित हैं:

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

css#parent {
  display: flex;
  align-content: center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

ग्रिड में लंबवत अक्ष की शुरुआत के साथ संरेखण

आइए हमारे ग्रिड में तत्वों को लंबवत अक्ष की शुरुआत के साथ संरेखित करें:

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

css#parent {
  display: grid;
  align-content: start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ग्रिड में लंबवत अक्ष के केंद्र के साथ संरेखण

और अब आइए तत्वों को लंबवत अक्ष के केंद्र के साथ संरेखित करें:

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

css#parent {
  display: grid;
  align-content: center;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

ग्रिड में लंबवत अक्ष के अंत के साथ संरेखण

आइए तत्वों को लंबवत अक्ष के अंत के साथ संरेखित करें:

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

css#parent {
  display: grid;
  align-content: end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

यह भी देखें