CSS flex गुण

  • पिछला पृष्ठ filter
  • अगला पृष्ठ flex-basis

परिभाषा और उपयोग

flex निम्नलिखित गुणों का लघुरूप है:

flex लाभकारी प्रोजेक्ट की लाभकारी लंबाई सेट करता है।

टिप्पणी:यदि एलीमेंट एक लाभकारी प्रोजेक्ट नहीं है, तो flex गुण अवैध है।

अन्य देखें:

तस्तीर: CSS 弹性框

参考：CSS flex-basis गुण

参考：CSS flex-direction गुण

参考：CSS flex-flow गुण

参考：CSS flex-grow गुण

参考：CSS flex-shrink गुण

参考：CSS flex-wrap गुण

参考：HTML DOM flex 属性

实例

不管其内容如何，使所有弹性项目的长度均相同：

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

खुद आयात करें

CSS 语法

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

属性值

值 描述
flex-grow 数字，规定项目相对于其余弹性项目的增长量。
flex-shrink 数字，规定项目相对于其余弹性项目的收缩量。
flex-basis

项目的长度。

合法值："auto"、"inherit"，或单位为 "%", "px", "em" 的值，或任何其他长度单位。
auto समान 1 1 auto।
initial समान 0 1 auto।देखें: initial。
none समान 0 0 auto।
inherit अपने पितृ एलेमेंट से इस गुण को विरासत करें।देखें: inherit。

तकनीकी विवरण

डिफ़ॉल्ट वैल्यू: 0 1 auto
विरासत: नहीं
एनिमेशन निर्माण: समर्थन।अलग गुण को देखें।देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
JavaScript व्याकरण: object.style.flex="1"

अधिक उदाहरण

flex और मीडिया क्वेरी का संयोजन करके विभिन्न स्क्रीन आकार/डिवाइस के लिए अलग-अलग लेआउट बनाएं:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* प्रतिसादी लेआउट - दो स्तम्भ लेआउट (50％) के बजाय एक स्तम्भ लेआउट (100％) बनाएं */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

खुद आयात करें

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण के पूर्णता से समर्थित पहले ब्राउज़र संस्करण को निर्देशित करते हैं।

सभी -webkit-、-ms- या -moz- से शुरू होने वाले नंबर फ़र्स्ट प्रीफ़िक्स वाली संस्करण का उपयोग करते हैं।

च्रोम आईई / एज फायरफॉक्स सफारी ओपेरा
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • पिछला पृष्ठ filter
  • अगला पृष्ठ flex-basis