आईई में मुख्य रूप से केंद्रित फ्लेक्सबॉक्स नहीं

Question

मेरे पास एक सरल वेब पेज है जिसमें कुछ Lipsum सामग्री है जो पृष्ठ पर केंद्रित है। पृष्ठ क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है। यदि मैं विंडो के आकार को कम करता हूं, तो सामग्री विंडो को तब तक भरती है जब तक वह नहीं भरता है और फिर एक स्क्रॉल बार को जोड़ता है और स्क्रीन से सामग्री को नीचे की ओर भरता है।

हालाँकि, पृष्ठ IE11 में केंद्र नहीं है। मैं शरीर को फ्लेक्स करके IE में केंद्र में पेज प्राप्त कर सकता हूं, लेकिन अगर मैं करता हूं, तो सामग्री स्क्रीन के ऊपर की ओर जाने लगती है और सामग्री के शीर्ष से कट जाती है।

नीचे दो परिदृश्य हैं। संबंधित Fiddles देखें। यदि समस्या अभी स्पष्ट नहीं है, तो परिणाम विंडो का आकार कम करें ताकि वह स्क्रॉल बार उत्पन्न करने के लिए मजबूर हो।

नोट: यह एप्लिकेशन केवल फ़ायरफ़ॉक्स, क्रोम और IE (IE11) के नवीनतम संस्करणों को लक्षित करता है, जो सभी फ्लेक्सबॉक्स की उम्मीदवार सिफारिश के लिए समर्थन करते हैं , इसलिए सुविधा संगतता एक मुद्दा नहीं होना चाहिए (सिद्धांत रूप में)।

संपादित करें : जब फुलस्क्रीन एपीआई का उपयोग बाहरी div को फुलस्क्रीन करने के लिए किया जाता है, तो सभी ब्राउज़र मूल CSS का उपयोग करके सही ढंग से केंद्र बनाते हैं। हालांकि, फुलस्क्रीन मोड छोड़ने पर, IE क्षैतिज रूप से केंद्रित और लंबवत शीर्ष संरेखित होने के लिए वापस लौटता है।

संपादित करें : IE11 फ्लेक्सबॉक्स के गैर-विक्रेता विशिष्ट कार्यान्वयन का उपयोग करता है। फ्लेक्सिबल बॉक्स ("फ्लेक्सबॉक्स") लेआउट अपडेट

---

Chrome / FF में केंद्र और आकार सही तरीके से, केंद्र नहीं बल्कि IE11 में सही ढंग से आकार बदलता है

फिडेल: http://jsfiddle.net/Dragonseer/3D6vw/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

---

केंद्र हर जगह सही ढंग से बंद हो जाता है, जब ऊपर से नीचे काट दिया जाता है

फिडल: http://jsfiddle.net/Dragonseer/5CxAy/

html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
    display: flex;
}

.outer
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
}

Comments

मेरे पास इस समय IE11 तक पहुंच नहीं है, क्या आपने इस समाधान की कोशिश की है: stackoverflow.com/questions/16122341/… ?

— साइमन

मार्जिन: ऑटो को फर्क नहीं पड़ता।

— ड्रैगनसेर

कृपया बग रिपोर्ट करें Microsoft कम से कम उनके पास आधिकारिक रूप से जारी करने में एक कम बग होगा, हमेशा की तरह IE के पास संभाल करने के लिए कुछ (कई अद्वितीय कीड़े) होंगे

— MarmiK

आप -ms-flexboxIE के लिए उपयोग करने की आवश्यकता है ..

— avrahamcool

IE11 डिस्प्ले के वर्तमान फ्लेक्सबॉक्स मानक का उपयोग करता है: फ्लेक्स। msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx । मैंने इसे वैसे भी आज़माया और इससे कोई फ़र्क नहीं पड़ा; सामग्री अभी भी शीर्ष संरेखित है। इसके अलावा, मूल प्रश्न में मेरे संपादन पर ध्यान दें, जो बताता है कि बाहरी स्क्रीन पूर्ण रूप से सही होने पर पूर्ण रूप से बाहर होने पर शीर्ष संरेखित होती है।

— ड्रैगनसेर

Answer 1

मैंने पाया कि ब्राउज़र में आंतरिक कंटेनरों को लंबवत रूप से संरेखित करने की समस्या है, जब केवल न्यूनतम ऊंचाई शैली सेट है या जब ऊंचाई शैली बिल्कुल भी गायब है। मैंने जो किया वह कुछ मूल्य के साथ ऊंचाई शैली को जोड़ना था और जो मेरे लिए समस्या को ठीक करता है।

उदाहरण के लिए :

.outer
    {
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;

       /* Center vertically */
       align-items: center;

       /*Center horizontaly */
       justify-content: center;

       /*Center horizontaly ie */
       -ms-flex-pack: center;

        min-height: 220px; 
        height:100px;
    }

इसलिए अब हमारे पास ऊंचाई शैली है, लेकिन न्यूनतम ऊंचाई इसे अधिलेखित कर देगी। इस तरह से यानी खुश है और हम अभी भी न्यूनतम ऊंचाई का उपयोग कर सकते हैं।

आशा है कि यह किसी के लिए उपयोगी है।

Comments

-ms-flex-align:center;IE10 के लिए मत भूलना । के लिए समर्थन align-itemsकेवल IE11 में जोड़ा गया था ।

— बोआज

आह! इतने महीनों बाद इसने मुझे बचाया - मिनट-ऊँचाई के बजाय ऊँचाई सेट करने से काम चला।

— पीट

@KaloyanStamatov ऑटोप्रेफ़िक्सर की जाँच करें और इन कष्टप्रद क्रॉस ब्राउज़र मुद्दों से खुद को छुटकारा दिलाने में मदद करें।

— hitautodestruct

यह समाधान तब काम नहीं करता है जब सामग्री न्यूनतम ऊंचाई से अधिक हो। min-heightवास्तव में ओवरराइड करता heightनियम है, लेकिन अगर सामग्री से अधिक है min-heightयह बस सीमा के बाहर का विस्तार होगा। @Ericodes द्वारा जवाब इस समस्या का हल और समाधान है कि समर्थन फ्लेक्स सभी ब्राउज़रों पर काम करता है।

— lachie_h

2019 में या उसके बाद आने वाले किसी भी व्यक्ति के लिए, अब तक का सबसे अच्छा समाधान @ sergey-fedirko को कोई अतिरिक्त HTML तत्व और कोई हार्ड हाइट की आवश्यकता नहीं है;) यह एक: stackoverflow.com/a/54796082/132020

— AsGoodAsItGets

Answer 2

जो कुछ भी div फ्लेक्सबॉक्स किया flex-direction: columnहै उसे एक कंटेनर में लपेटने की कोशिश करें जो फ्लेक्सबॉक्स भी है।

मैं सिर्फ IE11 में यह परीक्षण किया है और यह काम करता है। एक अजीब फिक्स, लेकिन जब तक Microsoft अपने आंतरिक बग को बाहरी ठीक नहीं करता ... तब तक करना होगा!

HTML:

<div class="FlexContainerWrapper">
    <div class="FlexContainer">
        <div class="FlexItem">
            <p>I should be centered.</p>
        </div>
    </div>
</div>

सीएसएस:

html, body {
  height: 100%;
}

.FlexContainerWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.FlexContainer {
  align-items: center;
  background: hsla(0,0%,0%,.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  width: 600px;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  box-sizing: border-box;
  max-width: 100%;
}

आपके लिए IE11 में परीक्षण करने के लिए 2 उदाहरण: http://codepen.io/philipwalton/pen/JdvdJE http://codepen.io/chriswrightdesign/pen/emQNGZ/

Comments

आपको बाहरी URL से लिंक करने के बजाय अपने वास्तविक उत्तर में समस्या को ठीक करने के लिए आपके द्वारा उपयोग किए गए कोड को पोस्ट करना चाहिए। फिर आपका जवाब लिंक के मरने के बाद भी मददगार बना रहेगा।

— केली केलर-हेइक्किला

यह, अब तक, इस बग का सबसे अच्छा समाधान है। अन्य सभी उत्तर कंटेनर पर एक निश्चित ऊंचाई का सुझाव देते हैं, जो काम नहीं करता है यदि सामग्री चर ऊंचाई की है। यह समाधान min-heightकठोर heightनियम के बजाय उपयोग की अनुमति देता है , जबकि अभी भी उन सभी ब्राउज़रों पर लंबवत केंद्रित है जो उपयोग करने का समर्थन करते हैं display: flex।

— lachie_h

बस display:flexआवरण पर जरूरत है, और शायद बच्चे पर इनमें से एक : width: 100% flex-basis:100% flex-grow:1आपकी सामग्री / शैली पर निर्भर करता है।

— fregante

यदि FlexContainerWrapper गुण align-itemsसेट है , तो यह वर्कअराउंड काम नहीं करता है। आपको इस संपत्ति के बिना मूल फ्लेक्सबॉक्स को एक फ्लेक्सबॉक्स के साथ लपेटना होगा।

— मार्कस क्राल

हे @MarcusKrahl! क्या आप कह रहे हैं कि मूल फ्लेक्सबॉक्स (FlexContainer) को बिना align-itemsसंपत्ति वाले फ्लेक्सबॉक्स (FlexContainerWrapper) के साथ लपेटें?

— 21

Answer 3

यहाँ मेरा कार्य समाधान (SCSS) है:

.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 120px;
  &:after{
    content:'';
    min-height:inherit;
    font-size:0;
  }
}

Answer 4

बस अगर कोई मेरे पास उसी मुद्दे के साथ यहां पहुंचता है, जिसे विशेष रूप से पिछली टिप्पणियों में संबोधित नहीं किया गया है।

मेरे पास margin: autoआंतरिक तत्व था, जिसके कारण यह माता-पिता (या बाहरी तत्व) के नीचे चिपके रहते थे। यह मेरे लिए तय क्या मार्जिन को बदल रहा था margin: 0 auto;।

Answer 5

यह एक ज्ञात बग है जो प्रतीत होता है कि Microsoft पर आंतरिक रूप से तय किया गया है।

https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview

Comments

यह स्पष्ट रूप से बाहरी रूप से तय नहीं किया गया है, हालांकि।

— ब्लेज़मॉन्गर

"यह मुद्दा Microsoft एज में ठीक किया गया प्रतीत होता है। हम वर्तमान में सुरक्षा संबंधी समस्याओं से बाहर इंटरनेट एक्सप्लोरर में फीचर बग पर काम नहीं कर रहे हैं।" उन्होंने IE प्री-एज के संस्करणों के लिए समस्या को बंद कर दिया है

— डेविड ज़ुलेका

यदि आप कर सकते हैं तो समाधान का उपयोग न्यूनतम ऊंचाई के बजाय ऊंचाई का उपयोग करना प्रतीत होता है।

— frodo2975

Answer 6

Https://github.com/philipwalton/flexbugs/issues/231#issuecomment-362790042 से मूल उत्तर

.flex-container{
min-height:100px;
display:flex;
align-items:center;
}

.flex-container:after{
content:'';
min-height:inherit;
font-size:0;
}

Answer 7

मैं दोनों fiddles अद्यतन किया है। मुझे उम्मीद है कि यह आपका काम कर देगा।

एकत्रित

    html, body
{
    height: 100%;
    width: 100%;
}

body
{
    margin: 0;
}

.outer
{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner
{
    width: 80%;
    margin: 0 auto;
}

केंद्र और स्क्रॉल

html, body
    {
        height: 100%;
        width: 100%;
    }

    body
    {
        margin: 0;
        display:flex;
    }

    .outer
    {
        min-width: 100%;  
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inner
    {
        width: 80%;
    margin-top:40px;
    margin: 0 auto;
    }

Comments

इनपुट के लिए धन्यवाद। दुर्भाग्यवश, आपके Fiddles Chrome या IE11 में काम नहीं करते हैं। Chrome और अब केंद्र और स्क्रॉल उदाहरण में केंद्रित केंद्र उदाहरण IE11 में केंद्रित नहीं है और अभी भी सामग्री को काटता है।

— ड्रैगनसेर

Answer 8

मेरे पास बहुत अनुभव नहीं है, Flexboxलेकिन यह मुझे लगता है कि टैग पर मजबूर ऊँचाई htmlऔर bodyपाठ के कारण पाठ को गायब होने का कारण बनता है - मैं IE में परीक्षण करने में सक्षम नहीं था, लेकिन मुझे क्रोम में समान प्रभाव मिला।

मैंने आपकी बेला को मिटा दिया heightऔर widthघोषणाओं को हटा दिया ।

body
{
    margin: 0;
}

ऐसा भी लगा कि flexसेटिंग को अन्य flexतत्वों पर लागू किया जाना चाहिए । हालाँकि, कारण के display: flexलिए आवेदन करने के लिए .innerतो मैं स्पष्ट रूप से करने के .innerलिए display: blockसेट और स्थिति के लिए निर्धारित किया .outerहै flex।

मैंने .outerव्यूपोर्ट भरने display: flex, और क्षैतिज और ऊर्ध्वाधर संरेखण सेट करने के लिए न्यूनतम ऊंचाई निर्धारित की है:

.outer
{
    display:flex;
    min-height: 100%;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

मैं स्पष्ट रूप से सेट .innerकरता हूं display: block। क्रोम में, ऐसा लग रहा था कि यह विरासत में मिला flexहै .outer। मैंने चौड़ाई भी निर्धारित की है:

.inner
{
    display:block;
    width: 80%;
}

इसने क्रोम में समस्या को ठीक कर दिया, उम्मीद है कि यह IE11 में भी ऐसा कर सकता है। यहाँ मेरे संस्करण का फिडेल है: http://jsfiddle.net/ToddT/5CxAy/21/

Comments

आपके जवाब के लिए धन्यवाद। IE में लंबवत केंद्र के लिए ऊंचाई और चौड़ाई की घोषणा आवश्यक है। इसके बिना, सामग्री अब IE11 में केंद्रित नहीं है।

— 22

यहां तक ​​कि बाहरी div पर ऊँचाई सेट के साथ? शायद शरीर में एक मिनट की ऊंचाई जोड़ सकते हैं?

— टॉड

Answer 9

एक अच्छा समाधान मिला जो मेरे लिए काम करता है, इस लिंक की जाँच करें https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 सबसे पहले, हम एक अभिभावक div को जोड़ते हैं, दूसरा हम मिनट की ऊंचाई बदलते हैं: 100% से मिनट तक ऊंचाई: 100vh। यह एक सम्मोहन की तरह काम करता है।

// by having a parent with flex-direction:row, 
// the min-height bug in IE doesn't stick around.
.flashy-content-outer { 
    display:flex;
    flex-direction:row;
}
.flashy-content-inner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:100vw;
    min-height:100vh;
    padding:20px;
    box-sizing:border-box;
}
.flashy-content {
    display:inline-block;
    padding:15px;
    background:#fff;
}  

Answer 10

यदि आप माता-पिता की चौड़ाई और ऊंचाई को परिभाषित कर सकते हैं, तो इसके लिए एक कंटेनर बनाने के बिना छवि को केंद्रीकृत करने का एक सरल तरीका है।

किसी कारण से, यदि आप न्यूनतम-चौड़ाई को परिभाषित करते हैं, तो IE अधिकतम-चौड़ाई को भी पहचान लेगा।

यह समाधान IE10 +, फ़ायरफ़ॉक्स और क्रोम के लिए काम करता है।

<div>
  <img src="http://placehold.it/350x150"/>
</div>

div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid orange;
    width: 100px;
    height: 100px;
}

img{
  min-width: 10%;
  max-width: 100%;
  min-height: 10%;
  max-height: 100%;
}

https://jsfiddle.net/HumbertoMendes/t13dzsmn/