ফ্লেক্সবক্স বনাম টুইটার বুটস্ট্র্যাপ (বা অনুরূপ কাঠামো) [বন্ধ]

Question

আমি সম্প্রতি আবিষ্কার করেছি Flexboxযখন আমি সর্বাধিকের উপর নির্ভর করে ডিভগুলি একই হাইট তৈরির সমাধান খুঁজছিলাম।

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

এখন, প্রশ্নগুলি হল: এর উপকারিতা এবং কি কি flexbox? ফ্লেক্সবক্সের সাথে এমন কিছু করা যায় না যা বুটস্ট্র্যাপের মতো কাঠামোর সাথে করতে পারে (অবশ্যই নিখুঁতভাবে গ্রিড সিস্টেম সম্পর্কে কথা বলছে)? কোন ওয়েবসাইটে কার্যকর করার সময় কোনটি দ্রুত হয়?

আমি অনুমান করছি যখন কেবল গ্রিড সিস্টেমের জন্য, এটি বিশুদ্ধরূপে ব্যবহার করা আরও স্মার্ট flexbox, তবে আপনি যদি ইতিমধ্যে কোনও কাঠামো ব্যবহার করছেন, তবে সেখানে কিছু যুক্ত flexboxহতে পারে?

flexboxফ্রেমওয়ার্কের উপর দিয়ে "গ্রিড সিস্টেম" চয়ন করার কোনও কারণ আছে কি?

Comments

আমি বুটস্ট্র্যাপ সহ ফ্লেক্সবক্স ব্যবহার করি।

— আইব্রিয়ান

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

— সালেম ওয়ারডানি

এটি সহায়ক হতে পারে। বুটস্ট্র্যাপ এখন ফ্লোট থেকে ফ্লেক্সে স্যুইচ করছে

— ফয়জান আকরাম দার

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

— নেরমিয়েন বারাকাত

আমি মতামত ভিত্তিক হিসাবে এটি বন্ধ করা উচিত যে একমত। প্রশ্নকারী মতামত না করে সত্যের সন্ধান করছেন। "ফ্লেক্সবক্সের উপকারিতা এবং কি কি?" প্রশ্নকারী (আমার মতো) প্রতিটি সিস্টেমের দৃpoint় অবস্থান এবং ত্রুটিগুলি নির্ধারণ করার চেষ্টা করছেন।

— দারিন কার্ডিন

Answer 1

বেশ কয়েকটি কারণে, বুটস্ট্র্যাপের চেয়ে ফ্লেক্সবক্স অনেক ভাল:

• বুটস্ট্র্যাপ গ্রিড সিস্টেমটি তৈরি করতে ভাসা ব্যবহার করে, যা অনেকেই বলে যে ওয়েবের জন্য নয়, যেখানে ফ্লেক্স-বাক্স আইটেমের আকার এবং সামগ্রীতে নমনীয় হয়ে বিপরীত কাজ করে; পিক্সেল বনাম ইম / রিম ব্যবহার করার মতোই পার্থক্য, বা কেবল মার্জিন এবং প্যাডিং ব্যবহার করে আপনার ডিভগুলি নিয়ন্ত্রণ করা এবং প্রাক-সংজ্ঞায়িত আকার কখনই সেট করা যায় না।

• বুটস্ট্র্যাপ, কারণ এটি ফ্লোট ব্যবহার করে, প্রতিটি সারির পরে ক্লিয়ারফিক্সের প্রয়োজন হয়, অথবা আপনি বিভিন্ন উচ্চতার বিভ্রান্তিকর ডিভ পাবেন। ফ্লেক্স-বাক্স এটি করে না এবং পরিবর্তে ধারকটির দীর্ঘতম ডিভের জন্য পরীক্ষা করে এবং এর উচ্চতায় আটকে থাকে।

ফ্লেক্স-বক্সের উপরে বুটস্ট্র্যাপ নিয়ে যাবার একমাত্র কারণ হ'ল ব্রাউজার সাপোর্টের অভাব (IE প্রধানত) (ইতিমধ্যে মারা যান)। এবং কখনও কখনও আপনি ক্রোম এবং সাফারি থেকে আলাদা আচরণ পান যদিও উভয়ই একই ওয়েবকিট ইঞ্জিন ব্যবহার করে।

সম্পাদনা:

বিটিডব্লিউ যদি আপনি কেবলমাত্র সমস্যাটির মুখোমুখি হন তবে হ'ল সমান উচ্চতা কলাম, এর জন্য বেশ কয়েকটি সমাধান রয়েছে:

• আপনি display: tableপিতামাতার উপর ব্যবহার করতে পারেন , display: table-cell;সন্তানের উপর একটি । প্রদর্শনে একই উচ্চতা কিভাবে পাবেন তা দেখুন : টেবিল-ঘর

• আপনি প্রতিটি ডিভের উপর পরম অবস্থান ব্যবহার করতে পারেন:
  position: absolute; top: 0; bottom: 0;

• এছাড়াও জ্যাকোয়ারি / জেএস সমাধান রয়েছে এবং অন্য একটি সমাধান আমি এই মুহুর্তে মনে করতে পারি না যে আমি পরে যুক্ত করার চেষ্টা করব।

সম্পাদনা 2:

এছাড়াও পরীক্ষা http://chriswrightdesign.com/experiments/flexbox-adventures/ & https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties কিভাবে আনমন বাক্স কাজের উপর।

3 সম্পাদনা করুন: https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

4 সম্পাদনা করুন: https://caniuse.com/#feat=flexbox

Comments

আপনার মন্তব্যের জন্য ধন্যবাদ. দুজনের "আরও ভাল" কী ছিল সে সম্পর্কে আমি কোনও ব্যাখ্যা খুঁজে পাইনি, তাই আমি আশা করি আমার প্রশ্নটি (এবং আপনার এবং ভবিষ্যতের উত্তর) লোকদের সিদ্ধান্ত নিতে সহায়তা করবে। ভাগ্যক্রমে, IE 11 আগের তিনটি সংস্করণ (যা আই 10 সমর্থন করে flexbox) এর চেয়ে এখনই বড় বাজারের শেয়ার পাচ্ছে , তাই আমার দৃষ্টিতে এটি ব্যবহার করা নিরাপদ। ফ্রেমওয়ার্ক এবং এর সংমিশ্রণটি ব্যবহার সম্পর্কে আপনার মতামত কী flexbox? অবশ্যই এটি ব্যবহারের সময় ফ্রেমওয়ার্কের গ্রিড সিস্টেমটিকে উপেক্ষা করা।

— রাভারভুর্ট

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

— ckuijjer

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

— সিটিএফ 0

সম্পূর্ণ সামঞ্জস্যের ডেটা: caniuse.com/#feat=flexbox নোট করুন যে পুরানো অ্যান্ড্রয়েডেও সমস্যা রয়েছে।

— সিভ্রেবার্ট

বাঁধ, এবং আমি ভেবেছিলাম যে আমরা এটি ব্যবহারের প্রায় সেখানে রয়েছি, মনে হচ্ছে এটি আরও এক বছর লাগবে বা কিছু ব 4 লাগবে যা আমরা বন্যে দেখতে পাচ্ছি, হেড-আপের জন্য থেক্স।

— সিটিএফ 0

Answer 2

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

Comments

আপনি বুটস্ট্র্যাপ প্রিন্ট ক্লাসের সাথে মিল রেখে কেবল

— প্রিন্টযোগ্য ডিভগুলির

Answer 3

আমি ভয় করি আপনি সিএসএস ট্রিক্সের উপর আর একটি নিবন্ধ মিস করেছেন :

দ্রষ্টব্য: ফ্লেক্সবক্স লেআউটটি কোনও অ্যাপ্লিকেশন এবং ছোট স্কেল লেআউটের ক্ষেত্রে সবচেয়ে উপযুক্ত, যখন গ্রিড লেআউটটি বৃহত্তর স্কেল বিন্যাসের জন্য তৈরি।

এর অর্থ এই নয়, আপনি চেষ্টা নাও করতে পারেন, তবে কেবল দু'বার ভাবেন। এবং সব শেষ পর্যন্ত কাঙ্ক্ষিত ব্রাউজার সমর্থনের উপর নির্ভর করে।

Comments

নিশ্চিত হয়ে নিন যে আপনি নিবন্ধটি একটি নতুন উদীয়মান গ্রিড বিন্যাসের বিষয়ে কথা বলছে - বুটস্ট্র্যাপের গ্রিড নয়।

— getsetbro

নিশ্চয়ই আমি মিস করেছি! :) সংশোধনের জন্য আপনাকে ধন্যবাদ।

— কাউট

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

— আহমদ ফারুক