যখন ফ্লেক্সবক্স আইটেমগুলি কলাম মোডে মুড়ে যায়, ধারকটি এর প্রস্থ বৃদ্ধি করে না

Question

আমি নেস্টেড ফ্লেক্সবক্স লেআউটে কাজ করছি যা নিম্নলিখিত হিসাবে কাজ করা উচিত:

বাইরেরতম স্তর ( ul#main) একটি অনুভূমিক তালিকা যা এতে আরও আইটেম যুক্ত করা হলে ডানদিকে প্রসারিত করতে হবে। যদি এটি খুব বড় হয় তবে একটি অনুভূমিক স্ক্রোল বার থাকা উচিত।

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

এই তালিকার প্রতিটি আইটের ( ul#main > li) একটি শিরোনাম ( ul#main > li > h2) এবং একটি অভ্যন্তরীণ তালিকা ( ul#main > li > ul.tasks) রয়েছে। এই অভ্যন্তরীণ তালিকাটি উল্লম্ব এবং প্রয়োজনে কলামগুলিতে মোড়ানো উচিত। আরও কলামগুলিতে মোড়ানো করার সময়, আরও আইটেমের জায়গা তৈরি করার জন্য এর প্রস্থটি বৃদ্ধি করা উচিত। এই প্রস্থ বৃদ্ধি বাইরের তালিকার ধারণকৃত আইটেমের ক্ষেত্রেও প্রযোজ্য।

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

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

এই জেএসফিডাল আমার এখন পর্যন্ত যা আছে তা দেখায়।

প্রত্যাশিত ফলাফল (আমি যা চাই) :

আসল ফলাফল (আমি যা পাই) :

পুরানো ফলাফল (2015 সালে আমি কী পেয়েছি) :

হালনাগাদ

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

এই অন্যান্য জেএসফিডাল স্পষ্টতই সমস্যাটি দেখায়। ক্রোম, ফায়ারফক্স এবং আই 11 এর বর্তমান সংস্করণগুলিতে সমস্ত আইটেম সঠিকভাবে মোড়ানো; তালিকার উচ্চতা rowমোডে বৃদ্ধি পায় তবে এর প্রস্থ columnমোডে বৃদ্ধি পায় না । এছাড়াও, কোনও columnমোডের উচ্চতা পরিবর্তন করার সময় কোনও উপাদানগুলির তাত্ক্ষণিকভাবে রিফ্লো পাওয়া যায় না , তবে rowমোডে রয়েছে।

তবে, সরকারী চশমা (বিশেষত উদাহরণ 5 দেখুন) মনে করে যে আমি যা করতে চাই তা সম্ভব হওয়া উচিত।

কেউ কি এই সমস্যার সাথে একযোগে আসতে পারেন?

আপডেট 2

পুনরায় আকারের ইভেন্টগুলির সময় জাভাস্ক্রিপ্ট ব্যবহার করে বিভিন্ন উপাদানের উচ্চতা এবং প্রস্থ আপডেট করতে অনেকগুলি পরীক্ষার পরে, আমি এই সিদ্ধান্তে পৌঁছেছি যে এটি সমাধান করার চেষ্টা করা খুব জটিল এবং খুব সমস্যা is এছাড়াও, জাভাস্ক্রিপ্ট যুক্ত করা অবশ্যই স্পষ্টভাবে ফ্লেক্সবক্স মডেলটিকে ভেঙে দেয়, যা যথাসম্ভব পরিষ্কার রাখা উচিত।

আপাতত, আমি overflow-y: autoপরিবর্তে পিছনে পড়ছি flex-wrap: wrapযাতে প্রয়োজনের সময় অভ্যন্তরীণ পাত্রে উল্লম্বভাবে স্ক্রোল হয়। এটি সুন্দর নয়, তবে এটি একদিক এগিয়ে যা কমপক্ষে ব্যবহারযোগ্যতা খুব বেশি ভাঙবে না।

Comments

কেবল একটি সিডনোট, তবে ক্রোমে এমন একটি বাগ রয়েছে যার ফলে এটি একটি প্রবাহের সাথে প্রবাহযুক্ত থাকে যা column wrapমোড়ক করার সময় প্রস্থটি প্রস্থ না বাড়িয়ে দেয় set আরও তথ্যের জন্য কোড. google.com/p/chromium/issues/detail?id=247963 দেখুন ।

— জেরিট বার্টিয়ার

আমি এটি আই 11 এ কাজ করতে পারি না। সেখানে, অন্তঃস্থল আইটেমগুলি মোড়ানো থাকে তবে অভ্যন্তরীণ তালিকা এবং এর ধারক (বাইরের আইটেম) তাদের প্রস্থ বৃদ্ধি করে না। বর্তমানে আমি অভ্যন্তরীণ তালিকা স্ক্রোল করে ফিরে যাচ্ছি, তবে এটি কোনও দীর্ঘমেয়াদী সমাধান নয়, এবং এর জন্য আমি জাভাস্ক্রিপ্ট যুক্ত করা এড়াতে চাই।

— অ্যান্ডার্স টর্নব্ল্যাড

Answer 1

সমস্যাটি

এটি ফ্লেক্স লেআউটে মৌলিক ঘাটতির মতো দেখাচ্ছে।

কলাম-দিকনির্দেশের একটি ফ্লেক্স ধারক অতিরিক্ত কলামগুলি সংযুক্ত করতে প্রসারিত হবে না। (এটি কোনও সমস্যা নয় flex-direction: row))

সিএসএসে কোনও পরিষ্কার উত্তর না দিয়ে এই প্রশ্নটি অনেক বার জিজ্ঞাসা করা হয়েছে (নীচের তালিকা দেখুন)।

এটি একটি বাগ হিসাবে পিন করা শক্ত কারণ সমস্ত বড় ব্রাউজারগুলিতে সমস্যা দেখা দেয়। তবে এটি প্রশ্ন উত্থাপন করে:

এটি কীভাবে সম্ভব যে সমস্ত বড় ব্রাউজারগুলি কলাম-দিক না করে সারি-দিকের মোড়কে মোড়কে প্রসারিত করার জন্য ফ্লেক্স পাত্রে পেল?

আপনি ভাববেন যে তাদের মধ্যে অন্তত কোনও একটি এটি সঠিকভাবে পাবেন। আমি কেবল কারণ নিয়ে অনুমান করতে পারি। সম্ভবত এটি প্রযুক্তিগতভাবে কার্যকর বাস্তবায়ন ছিল এবং এই পুনরাবৃত্তির জন্য তাক ছিল।

আপডেট: প্রান্তটি v16 এ সমস্যার সমাধান হয়েছে বলে মনে হচ্ছে।

---

সমস্যার উদাহরণ

ওপি সমস্যাটির চিত্রিত করে একটি দরকারী ডেমো তৈরি করেছে। আমি এটি এখানে অনুলিপি করছি: http://jsfiddle.net/nwccdwLw/1/

---

কাজের বিকল্পসমূহ

স্ট্যাক ওভারফ্লো সম্প্রদায় থেকে হকি সমাধান:

• "দেখে মনে হচ্ছে এই সমস্যাটি কেবল সিএসএস দিয়েই সমাধান করা যায় না, তাই আমি আপনাকে একটি জিকুয়েরির সমাধানের প্রস্তাব দিই।"

• "এটি কৌতূহল যে বেশিরভাগ ব্রাউজারগুলি কলাম ফ্লেক্স পাত্রে সঠিকভাবে প্রয়োগ করেনি, তবে মোড লেখার পক্ষে সমর্থন যথাযথ ভাল Therefore সুতরাং, আপনি উল্লম্ব রাইটিং মোড সহ একটি সারি ফ্লেক্স ধারক ব্যবহার করতে পারেন।"

---

আরও বিশ্লেষণ

• ক্রোমিয়াম বাগ রিপোর্ট

• মার্ক আমেরিকা এর উত্তর

---

অন্যান্য সমস্যা একই সমস্যা বর্ণনা করে

• ফ্লেক্স বক্স ধারক প্রস্থ বৃদ্ধি হয় না
• আমি কীভাবে একটি প্রদর্শন করতে পারি: ফ্লেক্স পাত্রে তার মোড়ানো সামগ্রীর সাথে অনুভূমিকভাবে প্রসারিত করতে পারি?
• নমনীয় প্রবাহ: কলামের মোড়ক। কনটেইনার প্রস্থ কীভাবে সামগ্রীর সমান সেট করবেন?
• ক্রোমে ফ্লেক্সবক্স ফ্লেক্স-প্রবাহ কলামটি মোড়ানো বাগগুলি?
• আমি কীভাবে "ফ্লেক্স-প্রবাহ: কলামের মোড়ক" ব্যবহার করব?
• কোনও কলামে সামগ্রী মোড়ানো হলে ফ্লেক্স ধারকটি প্রসারিত হয় না
• ফ্লেক্স-প্রবাহ: কলামের মোড়ক, একটি ফ্লেক্স বাক্সে প্যারেন্ট পাত্রে অতিরিক্ত প্রবাহ ঘটায়
• এইচটিএমএল ফ্লেক্সবক্স ধারক মোড়ানো শিশুদের উপরে প্রসারিত হয় না
• ফ্লেক্সবক্স ধারক এবং উপচে পড়া ফ্লেক্স বাচ্চারা?
• আমি কীভাবে এমন একটি ফ্লেক্সবক্স ধারক তৈরি করতে পারি যা মোড়ানো আইটেমগুলিতে ফিট করতে পারে?
• যখন একাধিক কলাম থাকে তখন একটি কলাম গণনা করে ফ্লেক্স ধারক
• ফ্লেক্স সহ ধারক পূর্ণ প্রস্থ তৈরি করুন
• ফ্লেক্সবক্স ধারক আকার পরিবর্তন সম্ভব?
• ফ্লেক্স-মোড়ানো ভিতরে ফ্লেক্স-গ্রো
• ফ্লেক্সবক্স ধারণ করে বৃদ্ধি
• এর সামগ্রীগুলিতে ফ্লেক্সবক্স উপাদানটি প্রসারিত করবেন?
• কন্টেন্ট ফিট করতে ফ্লেক্সবক্স কলাম প্রসারিত
• https://stackoverflow.com/q/48406237/3597276
• নমনীয় প্রবাহ: কলামের মোড়ক পিতামাতার উপাদানগুলির প্রস্থকে প্রসারিত করে না
• আমার <ul> সমস্ত <li> কভার করতে প্রস্থটি প্রসারিত করে না কেন?
• ফ্লেক্সবক্স কলামগুলি মোড়ানো অবস্থায় প্রস্থকে কীভাবে সমন্বয় করতে হবে?
• ফ্লেক্সবক্স মোড়কে পিতামাতার প্রশস্ততা বাড়ছে না?

Comments

বাগ রিপোর্টের মন্তব্য অনুসারে, এই সমস্যাটি ঠিক করা হবে না যতক্ষণ না তারা তাদের নতুন লেআউট ইঞ্জিন লেআউটএনজি

— বেন.12

আপনি যে লিঙ্কগুলি সরবরাহ করেছেন এবং শ্রেণিবদ্ধ করেছেন তার সংখ্যা সত্যিই দুর্দান্ত। আমি আশা করি বেশিরভাগ লোক এইভাবে উত্তর লিখবে। দুর্দান্ত উত্তর।

— বিগনেশ

তাদের জন্য বেশ কয়েকটি ফ্লেক্সবক্স বাগ এবং কাজের ক্ষেত্রগুলি তালিকাভুক্ত করার

— বেন .১২

আমরা কি সিএসএস গ্রিড ব্যবহার করে এই সমস্যাটি সমাধান করতে পারি?

— ইসমাইল ফারুক

আরও একটি কার্যক্ষম বিকল্প: codepen.io/_mc2/pen/PoPmJRP কিছু দিকের জন্য আমি লিখিত-মোড পদ্ধতির চেয়ে ভাল বলে মনে করেছি

— michalczerwinski

Answer 2

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

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

আমার কোডপেনের একটি উদাহরণ রয়েছে যা ফ্লেক্সবক্স ইস্যু এবং গ্রিড ফিক্সের মধ্যে টগল করে: https://codepen.io/MandeeD/pen/JVLdLd

Comments

আমি এটি যদি কখনও দেখি তবে এটি একটি মার্জিত কাজ! আমি কেবল গ্রিডে উঠছি এবং আমি আপনার সমাধানটি পছন্দ করি, এর জন্য আপনাকে ধন্যবাদ।

— অ্যালবার্ট

চিহ্নিত করা! আমার সমস্যা সমাধান।

— সেলিব্রেস্টিন বোচিস

ক্রোমে এখনও এই সমস্যাটি চলছে। আমি একটি গ্রিড workaround ব্যবহার এড়াতে হবে আশা করছি। অন্যরা এই পদ্ধতির ব্যবহার করছে তা জেনে রাখা ভাল!

— trukvl

জীবন বাঁচায়। আপনার grid-row-end: span X;আরও সারি নিতে কিছু আইটেমের প্রয়োজন হলে আপনি এটিও ব্যবহার করতে পারেন।

— মেরিওন হিউজেস 19

Answer 3

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

    element.style.flexBasis = "auto";
    element.style.flexBasis = `${element.scrollWidth}px`;

Answer 4

আমি সবেমাত্র এখানে একটি দুর্দান্ত ভয়ঙ্কর বিশুদ্ধ খাঁটি সিএসএস কাজ পেয়েছি।

https://jsfiddle.net/gcob492x/3/

ছদ্মবেশী: writing-mode: vertical-lrতালিকা তালিকায় সেট করুন তারপর writing-mode: horizontal-tbতালিকা আইটেমে in আমাকে জেএসফিডেলে শৈলীর ঝাঁকুনি দিতে হয়েছিল (অনেকগুলি সারিবদ্ধ শৈলী সরান, যা সমাধানের জন্য প্রয়োজনীয় নয়)।

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

এই মন্তব্যে বড় চিত্কার : যখন ফ্লেক্সবক্স আইটেমগুলি কলাম মোডে মোড়ানো হয় তখন ধারকটি এর প্রস্থ বৃদ্ধি করে না । এই ইস্যুটির থ্রেডটি খনন করে আমাকে https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39 এ নিয়ে যায় যা আমাকে এই জেএসফিডেলে নিয়ে যায়।

Answer 5

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

প্রস্তাবিত সমাধানটি হার্ড কোডেড, ধরে নিলাম আমাদের 3 টি বিভাগ রয়েছে, তবে একটি জেনেরিকের ক্ষেত্রে বাড়ানো যেতে পারে। মূল ধারণাটি হ'ল আমরা কীভাবে এই বিন্যাসটি অর্জন করতে পারি তা ব্যাখ্যা করা।

1. আইটেমগুলিকে মোড়ানোর জন্য ফ্লেক্স ব্যবহার করে 1 টি ধারক ডিভিতে সমস্ত আইটেম যুক্ত করা হচ্ছে
2. প্রতিটি "অভ্যন্তরীণ ধারক" এর প্রথম আইটেমটির (আমি এটি একটি বিভাগ বলব) একটি বর্গ থাকবে, যা আমাদের কিছু অংশের সাহায্য করতে সহায়তা করে যা প্রতিটি বিভাগের বিচ্ছেদ এবং স্টাইলিং তৈরি করে।
3. :beforeপ্রতিটি প্রথম আইটেম ব্যবহার করে, আমরা প্রতিটি বিভাগের শিরোনাম সনাক্ত করতে পারি।
4. ব্যবহারের spaceফলে বিভাগগুলির মধ্যে ফাঁক তৈরি হয়
5. যেহেতু spaceবিভাগটির পুরো উচ্চতা কভার করবে না আমি :afterবিভাগগুলিতেও যুক্ত করছি তাই একে একে নিখুঁত অবস্থান এবং সাদা ব্যাকগ্রাউন্ডের সাথে রাখছি ।
6. প্রতিটি বিভাগের ব্যাকগ্রাউন্ড রঙ স্টাইল করতে আমি প্রতিটি বিভাগের প্রথম আইটেমের মধ্যে অন্য ডিভ যুক্ত করছি। আমি পাশাপাশি পরম সঙ্গে অবস্থান হতে হবে এবং হবে z-index: -1।
7. প্রতিটি পটভূমির সঠিক প্রস্থ পেতে, আমি জেএস ব্যবহার করছি, সঠিক প্রস্থটি নির্ধারণ করছি, এবং পুনরায় আকার দেওয়ার জন্য একটি শ্রোতা যুক্ত করছি।

function calcWidth() {
  var size = $(document).width();
  var end = $(".end").offset().left;

  var todoWidth = $(".doing-first").offset().left;
  $(".bg-todo").css("width", todoWidth);

  var doingWidth = $(".done-first").offset().left - todoWidth;
  $(".bg-doing").css("width", doingWidth);

  var doneWidth = $(".end").offset().left - $(".done-first").offset().left;
  $(".bg-done").css("width", doneWidth + 20);

}

calcWidth();

$(window).resize(function() {
  calcWidth();
});

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 120px;
  align-content: flex-start;
  padding-top: 30px;
  overflow-x: auto;
  overflow-y: hidden;
}

.item {
  width: 200px;
  background-color: #e5e5e5;
  border-radius: 5px;
  height: 20px;
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;
}

.space {
  height: 150px;
  width: 10px;
  background-color: #fff;
  margin: 10px;
}

.todo-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "To Do (2)";
  font-weight: bold;
}

.doing-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Doing (5)";
  font-weight: bold;
}

.doing-first:after,
.done-first:after {
  position: absolute;
  top: -35px;
  left: -25px;
  width: 10px;
  height: 180px;
  z-index: 10;
  background-color: #fff;
  content: "";
}

.done-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Done (3)";
  font-weight: bold;
}

.bg-todo {
  position: absolute;
  background-color: #FFEFD3;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -10px;
  z-index: -1;
}

.bg-doing {
  position: absolute;
  background-color: #EFDCFF;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.bg-done {
  position: absolute;
  background-color: #DCFFEE;
  width: 10vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.end {
  height: 150px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="item todo-first">
    <div class="bg-todo"></div>
    Drink coffee
  </div>
  <div class="item">Go to work</div>

  <div class="space"></div>

  <div class="item doing-first">
    <div class="bg-doing"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <div class="space"></div>

  <div class="item done-first">
    <div class="bg-done"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>

  <div class="end"></div>

</div>

Answer 6

সম্ভাব্য জেএস সমাধান ..

var ul = $("ul.ul-to-fix");

if(ul.find("li").length>{max_possible_rows)){
    if(!ul.hasClass("width-calculated")){
        ul.width(ul.find("li").eq(0).width()*ul.css("columns"));
        ul.addClass("width-calculated");
     }
}

Comments

দুর্ভাগ্যক্রমে, এটি ব্যক্তিগত সাহায্য করবে না, কারণ পৃথক উপাদানগুলির উচ্চতা বিভিন্ন হতে পারে। সুতরাং উপাদানগুলির সংখ্যা আকর্ষণীয় নয় ... তবে columnsশৈলীর সম্পত্তি ব্যবহার করা একটি কার্যনির্বাহী সমাধানের সূচনা পয়েন্ট হতে পারে। হয়তো কলামের সংখ্যা সামঞ্জস্য এবং উল প্রস্থ।

— অ্যান্ডার্স টর্নব্ল্যাড

আমি কাজ করছি এমন একটি প্রতিক্রিয়া প্রয়োগের জন্য এই সমস্যার জেএস সমাধানের সাথেও শেষ করেছিলাম। এটি কোনও এবং বিভিন্ন আকারের উপাদানগুলির সাথে কাজ করার জন্য ডিজাইন করা হয়েছে। উদাহরণ এখানে: djskinner.github.io/react-column-wrap । উত্স কোডটি এখানে: github.com/djskinner/react-column-wrap

— djskinner