ডিসপ্লে: ইনলাইন-ফ্লেক্স এবং প্রদর্শন: ফ্লেক্সের মধ্যে পার্থক্য কী?

330

আমি আইডি র‌্যাপারের মধ্যে উপাদানগুলি উল্লম্বভাবে সারিবদ্ধ করার চেষ্টা করছি। display:inline-flex;আইডি র‌্যাপারটি ফ্লেক্স ধারক হওয়ায় আমি এই আইডিটিতে সম্পত্তিটি দিয়েছি ।

তবে উপস্থাপনায় কোনও পার্থক্য নেই। আমি প্রত্যাশা করেছি যে মোড়কের আইডিতে সমস্ত কিছু প্রদর্শিত হবে inline। কেন হয় না?

#wrapper {
    display: inline-flex;
    /*no difference to display:flex; */
}

<body>
    <div id="wrapper">
        <header>header</header>
        <nav>nav</nav>
        <aside>aside</aside>
        <main>main</main>
        <footer>footer</footer>
    </div>
</body>

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

css flexbox

— astridx
সূত্র

407

display: inline-flexফ্লেক্স আইটেমগুলি ইনলাইন প্রদর্শন করে না । এটি ফ্লেক্স ধারক প্রদর্শন ইনলাইন করে তোলে । display: inline-flexএবং এর মধ্যে একমাত্র পার্থক্য display: flex। অনুরূপ একটি তুলনা মধ্যে তৈরি করা যেতে পারে display: inline-blockএবং display: blockআর একটি ইনলাইন সহযোগীর আছে অন্য কোন ডিসপ্লে টাইপ প্রায় কাছাকাছি ।¹

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

আপনি "উল্লম্বভাবে প্রান্তিককরণ" দ্বারা ঠিক কী বোঝাতে চেয়েছেন বা কেন আপনি বিষয়বস্তুগুলিকে ইনলাইন প্রদর্শন করতে চান তা স্পষ্ট নয় তবে আমি সন্দেহ করি যে আপনি যা করতে চেষ্টা করছেন তার জন্য ফ্লেক্সবক্স সঠিক সরঞ্জাম নয়। সম্ভাবনা আছে কি আপনি যা খুঁজছেন শুধু সাধারণ পুরানো ইনলাইন লেআউট (হয় display: inlineএবং / অথবা display: inline-block), যার জন্য flexbox হয় না একটি প্রতিস্থাপন; flexbox হয় না সার্বজনীন বিন্যাস সমাধান সবাই দাবী এটা করা হয় (আমি এই চিঠিতে করছি কারণ ভুল ধারণা সম্ভবত আপনি কেন প্রথম স্থানে flexbox বিবেচনা করছি)।

¹ _{ব্লক লেআউট এবং ইনলাইন বিন্যাসের মধ্যে পার্থক্য এই প্রশ্নের ক্ষেত্রের বাইরে, তবে যেটি সবচেয়ে বেশি দাঁড়ায় তা স্বয়ংক্রিয় প্রস্থ: ব্লক-স্তরের বাক্সগুলি তাদের ধারণকৃত ব্লকটি পূরণ করতে অনুভূমিকভাবে প্রসারিত করে, যেখানে ইনলাইন-স্তরের বাক্সগুলি তাদের ফিট করার জন্য সঙ্কুচিত হয় বিষয়বস্তু। প্রকৃতপক্ষে, কেবলমাত্র এই কারণেই আপনি প্রায়শই ব্যবহার করতে পারবেন display: inline-flexনা যদি না আপনি আপনার ফ্লেক্স ধারক ইনলাইন প্রদর্শন করার জন্য খুব ভাল কারণ না পান।}

— বোল্টক্লক
সূত্র

14

পার্থক্যের জন্য বর্ধিত ফিডাল ডেমো inline-flexএবং flex: jsfiddle.net/mgr0en3q/1 @ ফিশ গ্রাফিক্স এবং @ এস্ট্রিডেক্স দ্বারা মূল ফিডল

— কেভিন ল

একেবারে সহায়ক উত্তর। আমি প্রথম বিভ্রান্ত হয়ে পড়েছিলাম। আমি যখন ইনলাইন ফ্লেক্সটি প্রয়োগ করি তখন আমি ফ্লেক্স আইটেমটি ডিসপ্লে ফ্লেক্সের সাথেও প্রয়োগ করি না। আসলে এটি ফ্লেক্স ধারকটিতে প্রয়োগ হয় :)

— ফারিস রায়হান

67

ঠিক আছে, আমি জানি প্রথমে কিছুটা বিভ্রান্তিকর হতে পারে, তবে displayপিতামাতার উপাদানগুলির বিষয়ে কথা বলা হচ্ছে, তাই এর অর্থ যখন আমরা বলি: display: flex;এটি উপাদান সম্পর্কে এবং যখন আমরা বলি তখনও display:inline-flex;উপাদানটি নিজেই তৈরি করে চলেছেinline ...

এটি একটি div ইনলাইন বা ব্লক তৈরি করার মতো , নীচে স্নিপেটটি চালান এবং আপনি দেখতে পাবেন যে কীভাবে display flexপরবর্তী লাইনে ব্রেক হয়:

.inline-flex {
  display: inline-flex;
}

.flex {
  display: flex;
}

p {
  color: red;
}

<body>
  <p>Display Inline Flex</p>
  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="inline-flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <p>Display Flex</p>
  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>

  <div class="flex">
    <header>header</header>
    <nav>nav</nav>
    <aside>aside</aside>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

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

এক নজরে পার্থক্যটি দেখতে দ্রুত নীচের চিত্রটি তৈরি করুন:

— আলিরেজা
সূত্র

3

আপনি এই ছবির জন্য কি ব্যবহার করছেন? এই ফন্টটি খুব সুন্দর।

— শুক্র

5

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

— AlienKevin

62

flexএবং inline-flexউভয়ই পাত্রে বাচ্চাদের ফ্লেক্স লেআউট প্রয়োগ করে। ধারক সহ display:flexএকটি ব্লক-স্তরের উপাদানটির মতো আচরণ করে, যখন display:inline-flexধারকটি একটি ইনলাইন উপাদানটির মতো আচরণ করে।

— সিংহরাশি
সূত্র

29

"ফ্লেক্স" এবং "ইনলাইন-ফ্লেক্স" এর মধ্যে পার্থক্য

সংক্ষিপ্ত উত্তর:

একটি হ'ল ইনলাইন এবং অন্যটি মূলত একটি ব্লক এলিমেন্টের মতো সাড়া দেয় (তবে এর কিছু নিজস্ব পার্থক্য রয়েছে)।

দীর্ঘ উত্তর:

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

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

আপনার সমস্যা হতে পারে

আপনি উদাহরণে উল্লিখিত উপাদানগুলির কারণে, যদিও আমি অনুমান করছি, আমি মনে করি আপনি এমনকি সারি-সারি সারি ফ্যাশনে তালিকাভুক্ত উপাদানগুলি প্রদর্শন করতে ফ্লেক্স ব্যবহার করতে চান তবে উপাদানগুলি পাশাপাশি দেখতে পাচ্ছেন।

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

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

display: inline-flex; flex-direction: row;

বেহালা

display: flex; flex-direction: row;

বেহালা

display: inline-flex; flex-direction: column;

বেহালা

display: flex; flex-direction: column;

বেহালা

display: inline;

বেহালা

display: block

বেহালা

এছাড়াও, একটি দুর্দান্ত রেফারেন্স ডক: ফ্লেক্সবক্সের সম্পূর্ণ নির্দেশিকা - সিএসএস কৌশল

15

প্রদর্শন: আনমন কেবলমাত্র ধারকগুলির ফ্লেক্স আইটেম বা শিশুদের জন্য ফ্লেক্স লেআউট প্রয়োগ করে। সুতরাং, ধারক নিজেই একটি ব্লক স্তর উপাদান থেকে যায় এবং এইভাবে পর্দার পুরো প্রস্থ গ্রহণ করে।

এটি প্রতিটি ফ্লেক্স পাত্রে স্ক্রিনের একটি নতুন লাইনে চলে আসে।

প্রদর্শন: ইনলাইন-ফ্লেক্সগুলি ফ্লেক্স আইটেম বা শিশুদের পাশাপাশি পাত্রে নিজেই ফ্লেক্স লেআউট প্রয়োগ করে। ফলস্বরূপ কন্টেইনারটি বাচ্চাদের মতো একটি ইনলাইন ফ্লেক্স উপাদান হিসাবে আচরণ করে এবং এভাবে কেবল তার আইটেম / শিশুদের জন্য প্রয়োজনীয় প্রস্থটি নেয় এবং স্ক্রিনের পুরো প্রস্থ নয়।

এটি একের পর এক দুটি বা আরও বেশি ফ্লেক্স পাত্রে পরিণত হয়, ইনলাইন-ফ্লেক্স হিসাবে প্রদর্শিত হয়, স্ক্রিনের পুরো প্রস্থ না নেওয়া পর্যন্ত তাদের পর্দার পাশাপাশি পাশাপাশি সারিবদ্ধ করে তোলে।

— নূর জাহান মুকাম্মেল
সূত্র

1

"

— ধারকটিতে

1

আপনার আরও কিছু তথ্য প্রয়োজন যাতে ব্রাউজারটি জানে যে আপনি কী চান। উদাহরণস্বরূপ, পাত্রে বাচ্চাদের "কীভাবে" নমনীয় করতে হবে তা জানাতে হবে।

আপডেট

আমি জুড়েছেন #wrapper > * { flex: 1; margin: auto; }আপনার সিএসএস প্রয়োজন এবং পরিবর্তিত inline-flexকরা flex, এবং আপনি পৃষ্ঠাতে সমানভাবে আউট কিভাবে উপাদানের এখন স্থান দেখতে পারেন নিজেদের।

— FiSH গ্রাফিক্স
সূত্র

2

আপনার উত্তরের জন্য আপনাকে ধন্যবাদ, তবে আমি জানতাম যে আমি এটি এভাবেই করতে পারি। আমি কেবল সম্পত্তি প্রদর্শনকে ভুল বুঝি: ইনলাইন-ফ্লেক্স; - আমি ভেবেছিলাম, এই সম্পত্তিটি আমার লক্ষ্য অর্জনের একটি সহজ উপায়। তবে শেষ দিনের মধ্যে আমি শিখেছি যে এই সম্পত্তিটি কেবল ধারক প্রদর্শনকে ইনলাইন করে। যুক্ত হওয়া ব্যাকগ্রাউন্ডের সাথে আমি এখন বৈশিষ্ট্য প্রদর্শনের মধ্যে পার্থক্য দেখছি: ইনলাইন-ফ্লেক্স; এবং প্রদর্শন: ফ্লেক্স; একটি ফ্লেক্সবক্সে jsfiddle.net/vUSmV/101

— অ্যাস্ট্রিডেক্স

-1

আরও ভাল বোঝার জন্য পূর্ণ পৃষ্ঠাতে খুলুন

.item {
  width : 100px;
  height : 100px;
  margin: 20px;
  border: 1px solid blue;
  background-color: yellow;
  text-align: center;
  line-height: 99px;
}

.flex-con {
  flex-wrap: wrap;
  /* <A>    */
  display: flex;
  /* 1. uncomment below 2 lines by commenting above 1 line */
  /* <B>   */
/*   display: inline-flex; */
	
}

.label {
  padding-bottom: 20px;
}
.flex-inline-play {
  padding: 20px;
  border: 1px dashed green;
/*  <C> */
  width: 1000px;
/*   <D> */
  display: flex;
}

<figure>
  <blockquote>
     <h1>Flex vs inline-flex</h1>
    <cite>This pen is understand difference between
    flex and inline-flex. Follow along to understand this basic property of css</cite>
    <ul>
      <li>Follow #1 in CSS:
        <ul>
          <li>Comment <code>display: flex</code></li>
          <li>Un-comment <code>display: inline-flex</code></li>
        </ul>
      </li>
      <li>
        Hope you would have understood till now. This is very similar to situation of `inline-block` vs `block`. Lets go beyond and understand usecase to apply learning. Now lets play with combinations of A, B, C & D by un-commenting only as instructed:
        <ul>
					<li>A with D -- does this do same job as <code>display: inline-flex</code>. Umm, you may be right, but not its doesnt do always, keep going !</li>
          <li>A with C</li>
          <li>A with C & D -- Something wrong ? Keep going !</li>
          <li>B with C</li>
          <li>B with C & D -- Still same ? Did you learn something ? inline-flex is useful if you have space to occupy in parent of 2 flexboxes <code>.flex-con</code>. That's the only usecase</li>
        </ul>
      </li>
    </ul>
  </blockquote>
  
</figure>
<br/>
 <div class="label">Playground:</div>
<div class="flex-inline-play">
  <div class="flex-con">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
  <div class="flex-con">
    <div class="item">X</div>
    <div class="item">Y</div>
    <div class="item">Z</div>
    <div class="item">V</div>
    <div class="item">W</div>
  </div>
</div>

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

— পবন গাঙওয়ানি
সূত্র

কোড পেন ==> কোডেপেন.আইও

— পবন