ফ্লেক্সবক্স IE তে উল্লম্বভাবে কেন্দ্র করে না

Question

পৃষ্ঠায় কেন্দ্রিক কিছু লিপসাম সামগ্রী সহ আমার একটি সাধারণ ওয়েব পৃষ্ঠা রয়েছে page পৃষ্ঠাটি ক্রোম এবং ফায়ারফক্সে দুর্দান্ত কাজ করে। যদি আমি উইন্ডোটির আকার হ্রাস করি তবে সামগ্রীটি উইন্ডোটি পূরণ না করা পর্যন্ত পূরণ করে এবং তারপরে একটি স্ক্রোল বার যুক্ত করে এবং স্ক্রিনে থাকা সামগ্রীটি নীচের দিকে পূরণ করে।

যাইহোক, পৃষ্ঠাটি আইই 11 তে কেন্দ্র করে না। আমি পৃষ্ঠাটি শরীরের মধ্যে ফ্লেক্সিং করে আইইতে কেন্দ্রে পেতে পারি, তবে যদি আমি এটি করি তবে সামগ্রীটি পর্দার উপরের দিকে যেতে শুরু করবে এবং সামগ্রীর শীর্ষস্থানটি কেটে ফেলবে।

নীচে দুটি পরিস্থিতি রয়েছে। সম্পর্কিত ফিডলগুলি দেখুন। যদি সমস্যাটি এখনই স্পষ্ট না হয়, ফলাফল উইন্ডোর আকার হ্রাস করুন যাতে এটি একটি স্ক্রোল বার তৈরি করতে বাধ্য হয়।

দ্রষ্টব্য: এই অ্যাপ্লিকেশনটি কেবল ফায়ারফক্স, ক্রোম এবং আইই (আই 11) এর সর্বশেষ সংস্করণগুলিকে লক্ষ্যবস্তু করে, যা প্রত্যেকেই ফ্লেক্সবক্সের প্রার্থী প্রস্তাবনার পক্ষে সমর্থন করে , তাই বৈশিষ্ট্যটির সামঞ্জস্যতা কোনও সমস্যা (তত্ত্ব অনুসারে) হওয়া উচিত নয়।

সম্পাদনা করুন : বাইরের ডিভিটি ফুলস্ক্রিনে ফুলস্ক্রিন এপিআই ব্যবহার করার সময়, সমস্ত ব্রাউজারগুলি মূল সিএসএস ব্যবহার করে সঠিকভাবে কেন্দ্র করে। যাইহোক, পূর্ণস্ক্রিন মোডটি ছেড়ে যাওয়ার পরে, IE অনুভূমিকভাবে কেন্দ্রিক এবং উল্লম্বভাবে শীর্ষে সারিবদ্ধ হয়ে ফিরে আসে।

সম্পাদনা করুন : আই 1111 ফ্লেক্সবক্সের নন-বিক্রেতা নির্দিষ্ট প্রয়োগকরণ ব্যবহার করে। নমনীয় বাক্স ("ফ্লেক্সবক্স") লেআউট আপডেট

---

ক্রোম / এফএফ-তে সঠিকভাবে কেন্দ্র এবং আকারগুলি দেয়, কেন্দ্র করে না তবে আইই 11-এ সঠিকভাবে আকার পরিবর্তন করে

ফিডল: http://jsfizz.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

এই মুহুর্তে আইই 11 এ আমার অ্যাক্সেস নেই, আপনি কি এই সমাধানটি চেষ্টা করেছেন: স্ট্যাকওভারফ্লো / প্রশ্ন / 16122341/… ?

— cimmanon

মার্জিন: স্বয়ংক্রিয়ভাবে কোনও পার্থক্য রয়েছে বলে মনে হচ্ছে না।

— ড্রাগনসিয়ার

দয়া করে বাগ প্রতিবেদন করুন মাইক্রোসফ্ট কমপক্ষে তাদের আনুষ্ঠানিকভাবে প্রকাশের ক্ষেত্রে একটি কম বাগ থাকবে, যেমন সর্বদা

— আইইয়ের

-ms-flexboxআইই এর জন্য আপনার ব্যবহার করা দরকার ..

— অভ্রহমকুল

আইই ১১ বর্তমান প্রদর্শনের ফ্লেক্সবক্স স্ট্যান্ডার্ডটি ব্যবহার করে: ফ্লেক্স। 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;আইই 10 এর জন্য ভুলবেন না । সমর্থন align-itemsকেবলমাত্র আইই 11 এ যুক্ত করা হয়েছিল ।

— বোয়াজ

আহ! অনেক মাস পরে এটি আমাকে বাঁচায় - ন্যূনতম-উচ্চতার পরিবর্তে উচ্চতা নির্ধারণের কাজ করে।

— পিট

@ কলোয়ান স্ট্যাম্যাটভ অটোপ্রেফিক্সার পরীক্ষা করে দেখুন এবং এই বিরক্তিকর ক্রস ব্রাউজার সমস্যা থেকে নিজেকে মুক্তি দিতে সহায়তা করুন।

— হাইটাটোডস্ট্রাক্ট

ন্যূনতম উচ্চতার চেয়ে সামগ্রী বড় হয়ে গেলে এই সমাধানটি কাজ করে না। min-heightপ্রকৃতপক্ষে ওভাররাইড করে heightনিয়ম, কিন্তু যদি বিষয়বস্তু ছাড়িয়ে গেছে min-heightএটি সহজভাবে সীমার বাইরে প্রসারিত হবে। @Ericodes দ্বারা উত্তর এই সমস্যা solves এবং সমাধান যে সমর্থন আনমন সকল ব্রাউজারে কাজ করে।

— lachie_h

:) এই এক; যে কেউ অথবা 2019 পর এখানে আসার জন্য, দ্বারা পর্যন্ত সবচেয়ে ভালো সমাধান দ্বারা @ Sergey-fedirko কোন অতিরিক্ত HTML উপাদানগুলি এবং কোন কঠিন উচ্চতা প্রয়োজন নেই stackoverflow.com/a/54796082/134120

— AsGoodAsItGets

Answer 2

আপনার যে কোনও ডিভ ফ্লেক্সবক্সযুক্ত flex-direction: columnপাত্রে যা ফ্লেক্সবক্সযুক্ত রয়েছে তাতে মোড়ানো চেষ্টা করুন ।

আমি এই মাত্র 11 এ পরীক্ষা করেছি এবং এটি কাজ করে। একটি অদ্ভুত ফিক্স, তবে যতক্ষণ না মাইক্রোসফ্ট তাদের অভ্যন্তরীণ বাগ ফিক্সটিকে বাহ্যিক করে তোলে ... ততক্ষণে তা করতে হবে!

এইচটিএমএল:

<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%;
}

আইই ১১ এ পরীক্ষার জন্য আপনার জন্য দুটি উদাহরণ: 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আপনার সামগ্রী / স্টাইলের উপর নির্ভর করে।

— ফ্রেঙ্গান্ট

FlexContainerWrapper বৈশিষ্ট্য align-itemsসেট করা থাকলে এই workaround কাজ করে না । আপনি এই সম্পত্তি ছাড়া একটি ফ্লেক্সবক্স দিয়ে মূল ফ্লেক্সবক্স মোড়তে হবে।

— মার্কাস ক্রহল

আরে @ মার্কাসক্রাহল! আপনি কি align-itemsসম্পত্তি (ফ্লেক্সকন্টেইনরপেপার) ছাড়াই একটি ফ্লেক্সবক্স দিয়ে মূল ফ্লেক্সবক্স (ফ্লেক্সকন্টেইনার) মোড়কে বলছেন?

— এরিকোডগুলি

Answer 3

এখানে আমার কাজের সমাধান (এসসিএসএস):

.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

এটি একটি পরিচিত বাগ যা মাইক্রোসফ্টে অভ্যন্তরীণভাবে স্থির করা হয়েছিল বলে মনে হয়।

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

Comments

যদিও বাহ্যিকভাবে এটি বাহ্যিকভাবে ঠিক করা হয়নি।

— ব্লেজমোনজার

"এই সমস্যাটি মাইক্রোসফ্ট এজতে ঠিক করা হয়েছে বলে মনে হয় We আমরা বর্তমানে সুরক্ষার সাথে সম্পর্কিত সমস্যার বাইরে ইন্টারনেট এক্সপ্লোরারে বৈশিষ্ট্য বাগগুলিতে কাজ করছি না" " তারা 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

আমি উভয় ফিডল আপডেট করেছি। আমি আশা করি এটি আপনার কাজটি করে দেবে।

কেঁদ্রীকরণ

    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

আপনার ইনপুট জন্য ধন্যবাদ। দুর্ভাগ্যক্রমে, আপনার ফিডলগুলি ক্রোম বা আইই 11 এ কাজ করছে না। কেন্দ্রীকরণের উদাহরণটি ক্রোম এবং কেন্দ্র এবং স্ক্রোল উদাহরণগুলিতে আর কেন্দ্র করে না এবং এখনও আইটেমটি বন্ধ করে দেয়।

— ড্রাগনসিয়ার

Answer 8

আমার সাথে খুব বেশি অভিজ্ঞতা নেই Flexboxতবে এটি আমার কাছে মনে হচ্ছে জোর করে উচ্চতাhtmlbody পুনরায় আকার দেওয়ার এবং ট্যাগগুলির উপর জোরের পাঠ্যটি শীর্ষে অদৃশ্য হয়ে যায় - আমি আইইতে পরীক্ষা করতে সক্ষম হয়েছি না তবে আমি ক্রোমে একই প্রভাব পেয়েছি।

আমি আপনার ভাঁজ কাঁটাচামচ 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%;
}

এটি ক্রোমে সমস্যাটি স্থির করেছে, আশা করি এটি আইই 11 তেও এটি করতে পারে। এখানে আমার সংস্করণের সংস্করণটি: http://jsfiddle.net/ToddT/5CxAy/21/

Comments

আপনার উত্তর দেওয়ার জন্য ধন্যবাদ. উচ্চতায় এবং প্রস্থের ঘোষণাটি IE এ উল্লম্বভাবে কেন্দ্রের জন্য প্রয়োজনীয়। এটি ব্যতীত, সামগ্রীগুলি এখন আর আই 11 এ কেন্দ্রিক নয়।

— ড্রাগনসিয়ার

এমনকি বাইরের ডিভের উপরেও উচ্চতা নির্ধারণ করা আছে? শরীরে একটি মিনিট উচ্চতা যুক্ত হতে পারে?

— টড

Answer 9

আমার জন্য কী কাজ করেছে তার একটি ভাল সমাধান খুঁজে পেয়েছি, এই লিঙ্কটি https://codepen.io/chriswrightdesign/pen/emQNGZ/?editors=1100 দেখুন, প্রথমে আমরা একটি পিতামাতার ডিভ যোগ করি, দ্বিতীয় আমরা ন্যূন-উচ্চতা পরিবর্তন করি: 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

আপনি যদি পিতামাতার প্রস্থ এবং উচ্চতা নির্ধারণ করতে পারেন তবে চিত্রটির জন্য কোনও ধারক তৈরি না করেই কেন্দ্রীভূত করার সহজ উপায় রয়েছে।

কোনও কারণে, আপনি যদি ন্যূনতম প্রস্থকে সংজ্ঞায়িত করেন তবে আইই সর্বোচ্চ-প্রস্থকেও স্বীকৃতি দেবে।

এই সমাধান 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/