डेवलपर / CSS लेआउट

Flexbox प्लेग्राउंड: कंटेनर और आइटम के CSS नियंत्रण

Flex direction, wrapping, justification, alignment और gaps आज़माएँ। फिर हर आइटम के grow, shrink, basis, order और alignment को बदलें। लेआउट में बदलाव देखें और CSS कॉपी करें।

Flexbox प्लेग्राउंड: कंटेनर और आइटम के CSS नियंत्रण: यह editable आइटम प्रॉपर्टीज़ वाला लाइव flex कंटेनर दिखाता है और हर नियंत्रण के पास उसका संक्षिप्त विवरण देता है। cross-axis प्रभावों को स्पष्ट दिखाने के लिए preview की ऊँचाई तय है। साझा rows और columns वाले Grid लेआउट CSS Grid जनरेटर में उपलब्ध हैं। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
Flexbox layout benchलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

पंक्ति या column के लिए flexbox का उपयोग करें। जब rows और columns दोनों को shared tracks चाहिए हों, तब CSS Grid का उपयोग करें। CSS Grid जनरेटर खोलें

चयनित आइटम 1

Flex layout model

W3C CSS Flexible Box Layout Module Level 1: https://www.w3.org/TR/css-flexbox-1/ . Main axis पर flex growth और shrink weights का उपयोग करके खाली स्थान बाँटा जाता है।

Alignment और accessibility

MDN के फ्लेक्सबॉक्स के मूल सिद्धांत: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox । क्रॉस अक्ष मुख्य अक्ष के लंबवत होती है; दृश्य क्रम बदलने से दस्तावेज़ का क्रम नहीं बदलता।

इस्तेमाल करने का तरीका

  1. कंटेनर की दिशा, wrapping और alignment सेट करें।
  2. किसी आइटम पर क्लिक करके उसका अलग sizing और alignment बदलें।
  3. आइटम जोड़ें या हटाएँ, लेआउट देखें और तैयार CSS कॉपी करें।

गोपनीयता और सीमाएँ

लेआउट की सेटिंग्स आपके ब्राउज़र में स्थानीय रूप से प्रोसेस होती हैं।

संबंधित टूल्स

CSS ग्रिडक्लिप-पाथCSS फ़ॉर्मैटर

अक्सर पूछे जाने वाले सवाल

align-content कभी-कभी कोई असर क्यों नहीं दिखाता?

यह flex lines को वितरित करता है। असर दिखने के लिए wrapping, एक से अधिक lines और cross axis पर खाली जगह ज़रूरी है।

क्या order स्क्रीन रीडर के क्रम को बदलता है?

नहीं। यह केवल दृश्य क्रम बदलता है, जबकि दस्तावेज़ पढ़ने और कीबोर्ड का क्रम अपरिवर्तित रहता है। दस्तावेज़ का क्रम तार्किक रखें।

मुझे इसके बजाय Grid का उपयोग कब करना चाहिए?

जब rows और columns को एक ही tracks साझा करनी हों, तब Grid का उपयोग करें। जब आइटम मुख्य रूप से एक ही axis पर व्यवस्थित करने हों, तब Flexbox उपयोगी है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं