flex-basis गुण

flex-basis गुण किसी विशिष्ट फ्लेक्स ब्लॉक का आकार उस पर शेष फ्लेक्स गुण लागू करने से पहले निर्धारित करता है। सामान्य तौर पर, यह गुण मुख्य अक्ष के अनुदिश तत्व का आकार निर्धारित करता है। इसका मतलब है कि यदि मुख्य अक्ष क्षैतिज है - यह गुण तत्वों की चौड़ाई निर्धारित करेगा, और यदि ऊर्ध्वाधर है - तो ऊंचाई।

किसी विशिष्ट फ्लेक्स ब्लॉक पर लागू होता है।

यह गुण संक्षिप्त रूप गुण flex का एक घटक भाग है।

सिन्टैक्स

cssसिलेक्टर {
  flex-basis: कोई भी CSS यूनिट (और प्रतिशत) | auto;
}

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

उदाहरण

मान लीजिए कि हमारी मुख्य अक्ष क्षैतिज है, और flex-basis का मान 50px है। इस स्थिति में तत्वों की चौड़ाई 50px होगी:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent  {
  display: flex;
  flex-direction: row; /* अक्ष क्षैतिज है */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px; /* तत्व का आकार */
  border: 1px solid green;
}

Результат:

उदाहरण

आइए अब अक्ष को पलटें, गुण के मान को बदले बिना। इस स्थिति में तत्वों की ऊंचाई 50px होगी:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* अक्ष ऊर्ध्वाधर है */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат:

यह भी देखें