ফ্লেক্সবক্স এবং ইন্টারনেট এক্সপ্লোরার 11 (প্রদর্শন: <html> এ ফ্লেক্স?)

117

আমি "ভাসমান" লেআউটগুলি থেকে সরে যাওয়ার এবং ভবিষ্যতের প্রকল্পগুলির জন্য সিএসএস ফ্লেক্সবক্স ব্যবহার করার পরিকল্পনা করছি। আমি দেখে আনন্দিত হয়েছি যে তাদের বর্তমান সংস্করণগুলিতে সমস্ত বড় ব্রাউজারগুলি (এক উপায়ে বা অন্য কোনওভাবে) ফ্লেক্সবক্সকে সমর্থন করে বলে মনে হচ্ছে।

কিছু উদাহরণ দেখার জন্য আমি "সলভড ফ্লেক্সবক্স" এর দিকে এগিয়ে গেলাম । তবে "স্টিকি পাদলেখ" উদাহরণ ইন্টারনেট এক্সপ্লোরার 11 আমি কাজ করতে বলে মনে হচ্ছে না একটু ঘুরে অভিনয় এবং কাজ এটি যোগ করে পেয়েছিলাম display:flexকরার <html>এবং width:100%করতে<body>

সুতরাং আমার প্রথম প্রশ্নটি: কেউ কি আমাকে এই যুক্তিটি ব্যাখ্যা করতে পারেন? আমি কেবল চারপাশে ঝাঁকুনি দিয়েছি এবং এটি কাজ করেছে, তবে কেন এটি সেভাবে কাজ করছিল তা আমি পুরোপুরি বুঝতে পারি না ...

তারপরে "মিডিয়া অবজেক্ট" উদাহরণ রয়েছে যা ব্যতীত সমস্ত ব্রাউজারে কাজ করে - আপনি এটি অনুমান করেছিলেন - ইন্টারনেট এক্সপ্লোরার। আমি এটি প্রায় চারপাশে বিব্রত, কিন্তু কোন সাফল্য ছাড়া।

আমার দ্বিতীয় প্রশ্নটি হ'ল: ইন্টারনেট এক্সপ্লোরারটিতে "মিডিয়া অবজেক্ট" উদাহরণ কাজ করার কোনও "ক্লিন" সম্ভাবনা কি আছে?

— Kodekan
সূত্র

1

এই পুরানো প্রশ্নের কেবলমাত্র একটি আপডেট: লিঙ্কযুক্ত ডেমো আইই 11-তে কাজ করে। এটি জিজ্ঞাসা করার পরে অবশ্যই 3 বছরে একটি বাগ ঠিক করা উচিত।

— ড্যারিল

151

Http://caniuse.com/#feat=flexbox অনুসারে :

"IE10 এবং IE11 ডিফল্ট মান জন্য flexহয় 0 0 autoবদলে 0 1 auto, প্রতি খসড়া বৈশিষ্ট হিসাবে সেপ্টেম্বর 2013 হিসাবে"

সুতরাং সরল কথায়, যদি আপনার সিএসএসে কোথাও আপনার এইরকম কিছু থাকে:, যা flex:1সমস্ত ব্রাউজারে একইভাবে অনুবাদ হয় না। এটিকে পরিবর্তন করার চেষ্টা করুন 1 0 0এবং আমি বিশ্বাস করি আপনি অবিলম্বে এটি দেখতে পাবেন যে এটি -জাতীয় কাজ করে।

সমস্যাটি হ'ল এই সমাধানটি সম্ভবত ফায়ারফক্সকে বিশৃঙ্খলা করবে, তবে তারপরে আপনি কেবল মোজিলাকে লক্ষ্য করতে এবং এটি পরিবর্তন করতে কিছু হ্যাক ব্যবহার করতে পারেন:

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

যেহেতু flexboxডাব্লু 3 সি প্রার্থী এবং অফিসিয়াল নন, তাই ব্রাউজারগুলি বিভিন্ন ফলাফল দেওয়ার ঝোঁক রাখে, তবে আমার ধারণা যে এটি অদূর ভবিষ্যতে পরিবর্তিত হবে।

কারও কাছে এর থেকে ভাল উত্তর থাকলে আমি জানতে চাই!

— Odisseas
সূত্র

1

আমি মনে করি তার মানে IE10 এর প্রয়োজন -ms-flex: 1 0 0;এবং IE11 flex: 1 0 0;..?

— ইস্টিন

19

গুগল ক্রোম 39 এর মাধ্যমে হঠাৎ আমার জন্য কাজ করা বন্ধ হয়ে গেল। আমাকে যুগে যুগে নিয়ে যাওয়ার চেষ্টা করেছিল তবে এটি ছিল তৃতীয় অঙ্কের স্পেসিফিকেশন। Chrome 39 মেনে চলেন না flex: 1 0 0;। তবে flex: 1 0 0%;( % নোট করুন ) বা কাজ করবে। flex: 1 0 auto;

— ইস্টিন

হ্যাঁ, এটি সত্য যে এটি আমার কিছু ডিজাইনও ভেঙে দিয়েছে! আমি এটিকে কেবলমাত্র এটিকে পরিবর্তন করে এটি স্থির flex: 1;করেছিলাম অনুমান করে যে এটি আপনি কী যাচ্ছেন তার উপর নির্ভর করে যদিও ...

— ওডিসিয়াস

1

আইই 11 এর মূল সমস্যাটি এটি গণনা করার পদ্ধতি flex-basis। আইটি 11 এর flex:1 0 100%জন্য কিছু ক্ষেত্রে কেন কাজ করে flex: 1 0 0%বা flex: 1 0 autoঅন্যগুলিতে এমনকি কাজ করে সে সম্পর্কে গিথুব একটি ভাল আলোচনা করেছেন। সময়ের আগে আপনাকে কন্টেন্টটি জানতে হবে।

— পি.ব্রায়ান.ম্যাকি

ক্যানিউজ.com/ # feat=flexbox থেকে , এটি নির্দিষ্টভাবে পরিচিত সমস্যাগুলির অধীনে উল্লেখ করেছে যে আইই 11 এর তৃতীয় যুক্তিতে যুক্ত হওয়া প্রয়োজন, ফ্লেক্স-ভিত্তিক সম্পত্তি ..

— হেনরি নিও

49

min-heightআইই 10 এবং আই 11 এ সমস্যাটি সমাধান করতে অন্য ফ্লেক্স ধারকটি ব্যবহার করুন:

এইচটিএমএল

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

সিএসএস

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}

একটি কার্যকারী ডেমো দেখুন ।

ফ্লেক্সবক্স লেআউটটি সরাসরি ব্যবহার করবেন না bodyকারণ এটি jQuery প্লাগইনগুলির (স্বয়ংক্রিয়রূপে, পপআপ, ইত্যাদি) sertedোকানো উপাদানগুলিকে স্ক্রু আপ করে।
আপনার ধারকটি ব্যবহার করবেন না height:100%বা ব্যবহার করবেন না height:100vhকারণ পাদলেখ উইন্ডোর নীচে আটকে থাকবে এবং দীর্ঘ সামগ্রীতে খাপ খাইয়ে নেবে না।
ব্যবহার করুন flex-grow:1বদলে flex:1জন্য IE10 এবং IE11 ডিফল্ট মান কারণ flexহয় 0 0 autoএবং 0 1 auto।

— BeliG
সূত্র

3

আমি পেয়েছি পার্শ্ব প্রতিক্রিয়া এড়াতে আমাকে যুক্ত flex-direction: columnকরতে .ie-fixMinHeightহয়েছিল। আপনার যদি IE নির্দিষ্ট এইচটিএমএল না থাকে তবে আপনি ব্যবহার করতে পারেন.fixMinHeight { display: -ms-flexbox; -ms-flex-direction: column; }

— মার্ক হরগান

আমি জানি এটি 2 বছরের পুরানো, তবে আপনাকে ধন্যবাদ! আমি এই স্ট্যাকওভারফ্লো.com/a/24979148/359157 অনুসরণ করছিলাম এবং এজ এবং ক্রোম নির্বিঘ্নে কাজ করার সময় আইই কেন ব্যস্ত হয়েছিল তা নির্ধারণের চেষ্টা করে চিরতরে লড়াই করেছি। heightবনাম min-heightকী হয়ে গেল।

— টিকবব 16'18

39

আপনার শুধু দরকার flex:1; এটি আইই ১১ এর জন্য ইস্যু ঠিক করবে। আমি দ্বিতীয় ওডিসিয়াস। এইচটিএমএল, শরীরের উপাদানগুলিতে অতিরিক্ত 100% উচ্চতা নির্ধারণ করুন ।

সিএসএস পরিবর্তন:

html, body{
    height:100%;
}
body {
    border: red 1px solid;
    min-height: 100vh;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
header {
    background: #23bcfc;
}
main {
    background: #87ccfc;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
footer {
    background: #dd55dd;
}

কাজের ইউআরএল: http://jsfiddle.net/3tpuryso/13/

— অশোক কুমার গুপ্ত
সূত্র

আপনি কি দয়া করে এই সমস্যাটি সম্পর্কে আরও ব্যাখ্যা করতে পারেন: আইই-তে কাজ করার "মিডিয়া অবজেক্ট" উদাহরণ পাওয়ার কোনও "পরিষ্কার" সম্ভাবনা আছে কি?

— অশোক কুমার গুপ্ত

1

এটি আমার পক্ষে কাজ করে। একটা জিনিষ আমি (কারণ এটা আমাকে বের ধরা) পাওয়া গেছে যে আপনি একটি ধারণকারী উপাদান আছে, হয় display: flex;এবং সংশ্লিষ্ট শৈলীতে প্রয়োগ করা আবশ্যক উভয়body এবং ধারক: jsfiddle.net/Skateside/nezdrrkr

— জেমস লং

এইচটিএমএল উচ্চতা 100% এ সেট করার ফলে কন্টেন্টটি mainসঠিকভাবে বেড়ে যাওয়া বন্ধ হয়ে যায় বলে মনে হয় (ক্রোমে, কমপক্ষে); যদি আপনি পর্যাপ্ত সামগ্রী যুক্ত করেন তবে এটি পাদলেখকে ছাড়িয়ে যাবে। jsfiddle.net/3tpuryso/65

— বোকা শেঠ

@ নির্বোধ যেভাবে এখনই চলছে ঠিক তেমন আপনি মূলত এটি 100% বর্ধন করতে বলছেন, পিক্সেল বেশি নয়। পরিবর্তে আপনার বিষয়বস্তুটি অনুসরণ করার জন্য htmlআপনাকে এই সেটটি করা উচিতmin-height: 100%

— ওডিসিয়াস

ধন্যবাদ! আমার জন্য যে অংশটি অনুপস্থিত ছিল তা আসলে কোনও ফ্লেক্স বৈশিষ্ট্যগুলির মধ্যে ছিল না, তবে উচ্চতা: ধারণকৃত উপাদানটির উপরে 100% (যা আমার জন্য একটি .pusher Div ছিল কারণ আমার সাইটে একটি প্রতিক্রিয়াশীল সাইডবার অন্তর্ভুক্ত রয়েছে)।

— জ্যাথার

0

এখানে ফ্লেক্স ব্যবহারের একটি উদাহরণ যা ইন্টারনেট এক্সপ্লোরার 11 এবং ক্রোমেও কাজ করে।

এইচটিএমএল

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Flex Test</title>
<style>
html, body {
    margin: 0px;
    padding: 0px;
    height: 100vh;
}
.main {
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: stretch;
    min-height: 100vh;
}

.main::after {
  content: '';
  height: 100vh;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  float: left;
}

.left {
    width: 200px;
    background: #F0F0F0;
    flex-shrink: 0;
}

.right {
    flex-grow: 1;
    background: yellow;
}
</style>
</head>

<body>
<div class="main">
    <div class="left">
        <div style="height: 300px;">
        </div>
    </div>

    <div class="right">
        <div style="height: 1000px;">
            test test test
        </div>
    </div>
</div>
</body>
</html>

স্নিপেট প্রসারিত করুন

— BadTree লু
সূত্র

15

আপনার কেবলমাত্র পেস্ট করার পরিবর্তে অতিরিক্ত তথ্য দিন Html।

— পিটার

7

যদিও এই উত্তরটি সম্ভবত সঠিক এবং কার্যকর, এটি কীভাবে সমস্যা সমাধানে সহায়তা করে তা ব্যাখ্যা করার জন্য যদি আপনি এর সাথে কিছু ব্যাখ্যা অন্তর্ভুক্ত করেন তবে এটি অগ্রাধিকার দেওয়া হয়। এটি ভবিষ্যতে বিশেষত কার্যকর হয়ে ওঠে, যদি কোনও পরিবর্তন (সম্ভবত সম্পর্কিত নয়) এর কারণে এটি কাজ করা বন্ধ করে দেয় এবং ব্যবহারকারীরা এটি কীভাবে একবার কাজ করেছিল তা বুঝতে হবে।

— এরটি সিডোহল

0

কখনও কখনও এটি যোগ করার মতোই সহজ: '-ms-' শৈলীর সামনে-এমএস-ফ্লেক্স-প্রবাহ: সারি মোড়ক; এটি কাজ করতে পেতে।

— মার্সেল গ্রে
সূত্র

3

কখনও কখনও, তবে বেশিরভাগ বার হয় না;) আসুন বিশ্বব্যাপী

— আইপি