ফ্লেক্স-বাক্স: গ্রিডে শেষ সারি সারিবদ্ধ করুন

Question

আমার কাছে একটি ধারক সহ একটি সাধারণ ফ্লেক্স-বাক্স বিন্যাস রয়েছে:

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

এখন আমি শেষ সারির আইটেমগুলি অন্যটির সাথে একত্রিত করতে চাই। justify-content: space-between;ব্যবহার করা উচিত কারণ গ্রিডের প্রস্থ এবং উচ্চতা সামঞ্জস্য করা যায়।

বর্তমানে এটির মতো দেখাচ্ছে

এখানে, আমি চাই নীচে ডানদিকে থাকা আইটেমটি "মাঝারি কলামে" থাকতে হবে। এটি সম্পাদন করার সহজ উপায় কী? এখানে একটি ছোট jsfiddle যা এই আচরণটি দেখায়।

.exposegrid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.exposetab {
  width: 100px;
  height: 66px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
}

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

Comments

সদৃশ: stackoverflow.com/questions/16377972/...

— cimmanon

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

— সেবাস্তিয়ান লরবার

বিকল্পভাবে, ব্যবহারটি নতুন সিএসএস গ্রিড মডিউলটি ব্যবহার করতে পারে - এতে কোন সমস্যা নেই

— ড্যানিয়েলড

শেষ সারিটিতে ফ্লেক্স আইটেমগুলি লক্ষ্যবস্তু করা

— মাইকেল বেঞ্জামিন

আমি যখন সন্তানের প্রস্থ পরিবর্তনশীল হয় তার জন্য জেনেরিক জেএস সমাধান যুক্ত করেছিলাম, সারি ভেরিয়েবলের আইটেমের সংখ্যাও তৈরি করে।

— তাও

Answer 1

একটি ::afterস্থান যুক্ত করুন যা স্থানটি অটোফিল করে। আপনার এইচটিএমএলকে দূষিত করার দরকার নেই। এখানে একটি কোডেপেন এটি দেখানো হচ্ছে: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Comments

এটিকে কীভাবে কোনওভাবে স্থান-চারদিকে কাজ করা সম্ভব হবে?

— টম

@ ডানআন্ড্রেসন দুটি বিষয় রয়েছে, এটি বাম থেকে শুরু হয় না (যেমন স্থান-মধ্যবর্তী), এবং শেষ সারির আইটেমগুলির মধ্যে স্থানও আগের সারির চেয়ে আলাদা ("নির্দিষ্ট আকারের কিছু আইটেম" কোনও আকারের মধ্যে সিমুলেট করে) গ্রিড - উভয়ের সাথে সম্পর্কিত) ... codepen.io/anon/pen/gPoYZE আমি যা চেয়েছিলাম তা হল "কৌশল" বজায় রাখা (স্পেস-এর চারপাশে বা স্পেস-মধ্যবর্তী) তবে পূর্বের লাইনের মতো বাম থেকে শুরু করুন ... আমি জানতে চেয়েছিলেন, আপনার আশ্চর্য সমাধানটি যদি সাধারণ করা সম্ভব হয়।

— টম

এটি কেবলমাত্র কাজ করে কারণ আইটেম স্থান থেকে প্যাডিং আছে তাদের এবং মিলিত শতাংশ প্রস্থ 4. প্রতিটি সেট জন্য 100% সমান এই codepen সালে আমি মুছে justify-content: space-between;থেকে .gridএবং সরানো .grid:afterএবং এটি একই কাজ করে। এখন আপনি কিছু চেষ্টা যদি ভালো এটি সম্পূর্ণই বিরতি। 4 টি প্রতিটি সেটের প্রস্থের 100% পর্যন্ত যোগ করুন দেখুন। ইন ওপি এর বেহালার প্রস্থ px আকারে সেট করা হয়, তাই আপনার সমাধান কাজ করে না এই পরিস্থিতি।

— জ্যাকব আলভারেজ

এই সমাধানটির চেষ্টা করে, প্রাথমিকভাবে, শেষ সারিতে যে আইটেমগুলি এটি ছোট ছিল সেগুলি সঠিকভাবে ছড়িয়ে দেওয়া হয়নি space-between। যাইহোক, যখন আমি সেট flex-basisএর .grid:afterগ্রিড অন্যান্য আইটেম (প্রতি-ব্রেকপয়েন্ট, উপরোক্ত ডিফল্ট / বেস মডিউল কোড অগ্রাহ্য করা হবে), শেষ সারি সঠিকভাবে ছড়িয়ে হিসাবে একই নির্ধারন করা হয়। আমার প্রাথমিক বাস্তবায়নে সাফারি, আইওএস, ফায়ারফক্স, ক্রোম (আইই পরীক্ষার প্রয়োজন) এবং আমার বৃহত্তম সারির আকার 3 টিতে কাজ করছে বলে মনে হচ্ছে।

— ওয়েবপাওয়ার

আমার প্রয়োজনের জন্য এটি নিম্নলিখিত সংশোধনটির সাথে কাজ করেছে: { content: "";flex: 0 0 32%;max-width: 480px;}এবং আমি মিডিয়া ক্যোয়ারী পরিবর্তনগুলির সাথে সর্বাধিক প্রস্থ পরিবর্তন করেছি যাতে গ্রিডটি সমস্ত প্রস্থে নিখুঁত ছিল।

— কলিন ওয়াইজম্যান

Answer 2

একটি কৌশলটি শূন্য উচ্চতা প্রদত্ত এমন অতিরিক্ত সংখ্যক অতিরিক্ত উপাদান (যতগুলি সারি সর্বাধিক সংখ্যক উপাদান আপনি আশা করতে পারেন) সন্নিবেশ করানো হবে। স্থানটি এখনও বিভক্ত, তবে অতিরিক্ত অতিরিক্ত সারিগুলি কিছুই ভেঙে যায় না:

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

ভবিষ্যতে, একাধিক ব্যবহারের মাধ্যমে এটি অর্জনযোগ্য হতে পারে ::after(n)।

Comments

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

— রায়ান নরবাউয়ার

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

— কোডমনকি

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

— lukejacksonn

পুনঃটুইট আমি কেবল গ্রিডের মধ্যে থাকা এই ইনলাইন-ব্লকগুলি সারিবদ্ধ করার উদ্দেশ্যে এই সমস্ত হ্যাকগুলি থেকে কীভাবে মুক্তি পাব তা চিন্তা করেই কেবল ফ্লেক্সবক্স ব্যবহার শুরু করেছি এবং এখন দেখা যাচ্ছে যে এটি কেবল সম্ভব নয়! আমি এখনই এই ব্লকটিকে আঘাত করেছি, এমন সীমাতে পৌঁছে যা আমি ভেবেছিলাম যে এই পুরানো অবিশ্বাস্য সিএসএস সমস্যাগুলি আমি খুব সহজেই সুখে পৌঁছাতে পারব। এত দ্রুত নয়, আমার ধারণা। সঠিক উল্লম্ব কেন্দ্রীকরণ পেতে এটি কেবল 20 বছর সময় নিয়েছে - আমরা অবশ্যই অপেক্ষা করতে পারি। যীশু, এটি খুব সহজ কাজ বলে মনে হচ্ছে ...

— অ্যান্ড্রে

@ ডালগার্ড আমি এটি মনে করি না। আমার মন্তব্য দেখুন ।

— জ্যাকব আলভারেজ

Answer 3

অন্যান্য পোস্টারগুলিতে যেমন উল্লেখ করা হয়েছে - শেষ সারিটি ফ্লেক্সবক্সের সাথে বাম-সারিবদ্ধ করার কোনও পরিষ্কার উপায় নেই (কমপক্ষে বর্তমানের অনুমান অনুযায়ী)

তবে এটির জন্য মূল্য: সিএসএস গ্রিড লেআউট মডিউলটি সহ এটি আশ্চর্যজনকভাবে সহজ:

মূলত প্রাসঙ্গিক কোড এটিকে ফোটায়:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) ধারক উপাদান একটি গ্রিড ধারক করুন

2) প্রস্থ 100px এর স্বয়ংক্রিয় কলামগুলির সাথে গ্রিডটি সেট করুন। ( অটো- ফিলের ব্যবহারটি নোট করুন (যেমনটি প্রস্তাবিত auto-fit- যা (1-সারি বিন্যাসের জন্য) খালি ট্র্যাকগুলি 0 তে পতিত হয়েছে - এতে আইটেমগুলি অবশিষ্ট স্থানটি বাড়িয়ে তুলবে This এর ফলে একটি যুক্তিসঙ্গত 'স্পেস-মধ্যবর্তী স্থান হবে' 'গ্রিডের যখন কেবল একটি সারি থাকে যা আমাদের ক্ষেত্রে যা চায় তা নয় (( তাদের মধ্যে পার্থক্য দেখতে এই ডেমোটি দেখুন)।

3) গ্রিড সারি এবং কলামগুলির জন্য ফাঁক / নালী নির্ধারণ করুন - যেহেতু একটি 'স্পেস-মধ্যবর্তী' বিন্যাস চান - ফাঁকটি আসলে ন্যূনতম ফাঁক হবে কারণ এটি প্রয়োজনীয় হিসাবে বৃদ্ধি পাবে।

4) ফ্লেক্সবক্সের অনুরূপ।

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

কোডপেন ডেমো (প্রভাবটি দেখতে পুনরায় আকার দিন)

Comments

সুন্দর সমাধান। কেবল সমস্যাটি হ'ল এটি আই 10/11 এর সাথে কাজ করে না।

— zendu

সম্পর্কিত auto-fit, ক্রোম 57-60 (এবং এর ইঞ্জিনের ভিত্তিতে ব্রাউজারগুলি যেমন স্যামসাং ইন্টারনেট 6.0 এর মতো) তে একটি বাগ ছিল কারণ সেই সময়টি অনুমানটি কিছুটা অস্পষ্ট ছিল। এখন স্পষ্টটি স্পষ্ট করা হয়েছে এবং ক্রোমের নতুন সংস্করণগুলি auto-fitসঠিকভাবে রেন্ডার হয়েছে , তবে পুরানো ইঞ্জিন সহ ব্রাউজারগুলি এখনও ব্যবহারে রয়েছে, সুতরাং দয়া করে এই মানটি সম্পর্কে সতর্ক হন।

— ইলিয়া স্ট্রেলটসিন

বর্তমান সম্ভাবনার আলোকে, এটি এখন স্বীকৃত উত্তর হওয়া উচিত। ব্যবহার :afterসিউডো-উপাদান প্রান্ত ক্ষেত্রে অবাঞ্ছিত ফলাফল হতে পারে।

— পল

@ ড্যানিয়েল্ড এই পরামর্শটি আমাকে অনেক সাহায্য করেছে, আপনাকে ধন্যবাদ!

— ক্রিস

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

— পালাত্তির

Answer 4

কোনও অতিরিক্ত চিহ্নআপ ছাড়াই, ::afterকলামটির প্রস্থ উল্লেখ করে আমার জন্য কেবল কাজ করা যুক্ত ।

.grid {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
.grid::after{
  content: '';
  width: 10em // Same width of .grid__element
}
.grid__element{
  width:10em;
}

এইচটিএমএল সহ:

<div class=grid">
   <div class="grid__element"></div>
   <div class="grid__element"></div>
   <div class="grid__element"></div>
</div>

Comments

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

— জন হগল্যান্ড

এমনকি flex-basis: 10emপ্রস্থের পরিবর্তে ব্যবহার করা ভাল ।

— beytarovski

Answer 5

আপনি পারবেন না। ফ্লেক্সবক্স কোনও গ্রিড সিস্টেম নয়। আপনি যা চাইছেন তা করার জন্য এটির ভাষা রচনা নেই, আপনি যদি ব্যবহার করছেন তবে কমপক্ষে তা নয় justify-content: space-between। ফ্লেক্সবক্সের সাথে আপনি যে সর্বাধিক নিকট হতে পারেন তা হ'ল কলাম ওরিয়েন্টেশন ব্যবহার করা, যার জন্য একটি স্পষ্ট উচ্চতা নির্ধারণ করতে হবে:

http://cssdeck.com/labs/pvsn6t4z (দ্রষ্টব্য: উপসর্গগুলি অন্তর্ভুক্ত নয়)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

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

http://cssdeck.com/labs/dwq3x6vr (দ্রষ্টব্য: উপসর্গগুলি অন্তর্ভুক্ত নয়)

ul {
  columns: 15em;
}

Comments

একটি উপায় আছে; আমার উত্তর দেখুন।

— ডালগার্ড

@ ডালগার্ড, আপনার উত্তরটি কার্যকর সমাধান, সত্যিকারের সমাধান নয়। সিমনম্যানের উত্তরটি সঠিক।

— জোনাহ

@ জোনাঃ আমি মনে করি "কৌশল" আমার উত্তরের একটি সুস্পষ্ট বর্ণনা। এটি অবশ্যই প্রশ্নকর্তা সহ অনেক লোকের সমাধান হিসাবে কাজ করেছে।

— ডালগার্ড

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

— cimmanon

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

— ডালগার্ড

Answer 6

একটি সম্ভাব্য সমাধান হ'ল পাত্রে ব্যবহার justify-content: flex-start;করা .grid, তার বাচ্চাদের উপর আকারের সীমাবদ্ধতা এবং উপযুক্ত শিশু উপাদানগুলির উপর মার্জিন - কলামগুলির পছন্দসই সংখ্যার উপর নির্ভর করে।

3-কলামের গ্রিডের জন্য, বেসিক সিএসএস দেখতে এইরকম হবে:

.grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.grid > * {
    flex: 0 0 32%;
    margin: 1% 0;
}

.grid > :nth-child(3n-1) {
    margin-left: 2%;
    margin-right: 2%;
}

এটি অন্য একটি অপূর্ণ সমাধান, তবে এটি কার্যকর হয়।

http://codepen.io/tuxsudo/pen/VYERQJ

Answer 7

আমি জানি অনেক উত্তর এখানে আছেন কিন্তু .. এই কাজ করতে সবচেয়ে সহজ উপায় সাথে আছেন gridপরিবর্তে flexএবং grid template columnsসঙ্গে repeatএবং auto fills, আপনি পিক্সেল যে, তোমরা একে উপাদানে দেওয়া আছে, সংখ্যা সেট করতে যেখানে 100pxআপনার স্নিপেট কোড থেকে।

.exposegrid {
     display: grid;
     grid-template-columns: repeat(auto-fill, 100px);
     justify-content: space-between;
}
 .exposetab {
     width: 100px;
     height: 66px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     margin-bottom: 10px;
}

<div class="exposegrid">
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
   <div class="exposetab"></div>
</div>

Comments

শেষ সারির আইটেমগুলি সারিবদ্ধভাবে রাখার জন্য এটি সঠিক সমাধান।

— a.barbieri

আমি সম্মত, সঠিক উপায় গ্রিড ব্যবহার করা হয়। এটি ফ্লেক্সবক্সের সাহায্যে অর্জন করা যায় তবে গ্রিড ব্যবহার করার জন্য অনেক ক্লিনার।

— nbarth

Answer 8

হ্যাঁ.! আমরা কিছু মিডিয়া ক্যোয়ারী সহ এবং কলামগুলির সর্বাধিক সংখ্যক সংজ্ঞায়িত করতে পারি ।

এখানে 4 টি কলাম ব্যবহার করছি। আমার কোড পরীক্ষা করুন:

.container {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
}

.container .item {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}

<div class="container">

  <div class="item">
    <div class="item-child">1</div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>
  <div class="item">
    <div class="item-child"></div>
  </div>

</div>

দ্রষ্টব্য
1) শিশু ডিভ তৈরি করার দরকার নেই। এটি 'img' r এর মতো অন্য কোনও ট্যাগ হতে পারে যা আপনি চান ..
২) আপনি যদি আরও কলাম চান তবে মিডিয়া ক্যোয়ারী এবং সর্বাধিক নং কলামগুলি সমন্বয় করতে পারেন।

Comments

এটি সর্বশেষ

— আইইতে

Answer 9

আপনি যদি কোনও প্রাথমিক স্থান ছাড়াই আইটেম এবং আইটেমগুলির মধ্যে কিছু জায়গা দিয়ে গ্রিড চান তবে এই সহজ সমাধানটি কাজ করে:

.grid {
    display: flex;
    flex-flow: row wrap;
    margin: 0 -5px; // remove the inital 5px space
    width: auto;
}
.grid__item {
    width: 25%;
    padding: 0 5px; // should be same as the negative margin above.
}

আপনি যদি প্রাথমিক 5px স্থান চান তবে কেবল নেতিবাচক মার্জিনটি সরিয়ে ফেলুন :) সাধারণ।

https://jsfiddle.net/b97ewrno/2/

গৃহীত উত্তর, ভাল হওয়া সত্ত্বেও এটি দ্বিতীয় সারিতে থাকা উপাদানগুলির মধ্যে কোনও স্থান রাখে না ..

Comments

আশ্চর্য হ'ল এর আর কোনও ভোট নেই। এটি একটি সুন্দর পদ্ধতির যা ফ্লেক্স যাদুঘরের অন্তর্ভুক্ত।

— এডুয়ার্ডো লা হোজ মিরান্ডা

@ এডুয়ার্ডোলা লাওজমিরান্দা ধন্যবাদ! তবে কেন "যাদুঘর"? আইই ১১ সিএসএস গ্রিড সমর্থন করে না এবং বেশিরভাগ সাইটগুলিকে এখনও এটি সমর্থন করা দরকার। + ফ্রন্টএন্ড বিকাশের কিছু বড় টাইমার এখনও দাবি করে যে গ্রিড বনাম ফ্লেক্সবক্সের জন্য বিভিন্ন ব্যবহারের কেস রয়েছে। তবে সম্ভবত আপনি কেবল বোঝাতে চেয়েছিলেন যে এটি ওয়েব ইতিহাসের একটি গুরুত্বপূর্ণ অঙ্গ হওয়া উচিত: ডি

— ওজজি

হা হা অবশ্যই. আমি তখন উত্তেজিত ছিলাম। এর অর্থ হ'ল এই সমস্যাটি গ্রহণ করা দুর্দান্ত এবং সর্বনিম্ন was

— এডুয়ার্ডো লা হোজ মিরান্ডা

@ দ্যেন্সী আপনার জানা দরকার না যে এই সমাধানের জন্য এটি প্রতি সারিতে 25% সর্বোচ্চ 4, তবে আপনি যা চান শতাংশ ব্যবহার করতে পারেন

— ওজজিআইই

@ ওজজিআই মানে আইটেমের প্রস্থ স্থির করা হয়েছে (100px এর মতো) তবে ধারক প্রস্থটি গতিশীল, সুতরাং সারি প্রতি আইটেমগুলি গতিশীল।

— নিবিড়

Answer 10

আপনি যদি গ্রিডে শেষ আইটেমটি সারিবদ্ধ করতে চান তবে নিম্নলিখিত কোডটি ব্যবহার করুন:

গ্রিড ধারক

.card-grid {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.card-grid:after {
  content: "";
  flex: 1 1 100%;
  max-width: 32%;
}

গ্রিড আইটেম

.card {
  flex: 1 1 100%;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  max-width: 32%;
  display: block;
  position: relative;

}

কৌশলটি হ'ল আইটেমের সর্বাধিক প্রস্থ .card- গ্রিড: পরে সর্বাধিক প্রস্থের সমান।

কোডেপেনে লাইভ ডেমো

Comments

সিথুলু আপনাকে এবং আপনার কম্পিউটারকে আশীর্বাদ করে

— L422Y

যখন কার্ডের আকার স্থির হয় এবং প্রতিটি সারিতে কার্ডের সংখ্যা অজানা থাকে তখন এই পদ্ধতিটি কার্যকর হয় না। codepen.io/zendu/pen/WXNGvo

— zendu

Answer 11

"ফ্লেক্স-স্টার্ট" ব্যবহার করা এবং ম্যানুয়ালি মার্জিনগুলি যুক্ত করা সম্ভব। এর জন্য কিছু গণিত-হ্যাকিং দরকার তবে এটি অবশ্যই করা সহজ এবং কম ব্যবহারের মতো সিএসএস প্রিপ্রোসেসর দিয়ে সহজেই ব্যবহার করা সহজ।

উদাহরণস্বরূপ দেখুন এই কম মিশ্রণ:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
  @contentPercent: 100% - @spacingPercent;
  @sideMargin: @spacingPercent/(@columnNumber*2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  > * {
    box-sizing: border-box;
    width: @contentPercent/@columnNumber;
    margin-left: @sideMargin;
    margin-right: @sideMargin;
  }
}

এবং তারপরে এটি সহজেই একটি প্রতিক্রিয়াশীল গ্রিড বিন্যাস প্রদর্শন করতে ব্যবহার করা যেতে পারে:

ul {
  list-style: none;
  padding: 0;
  @spacing: 10%;
  @media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
  @media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
  @media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
  @media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
  @media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}

li {
  background: pink;
  height: 100px;
  margin-top: 20px;
}

এখানে একটি উদাহরণ

http://codepen.io/anon/pen/YyLqVB?editors=110

Comments

আপনি কখনও কনটেন্ট পার্সেন্ট ব্যবহার করবেন না। আপনি কি করতে চান?

— নেভারফক্স

প্রস্থ: @ কন্টেন্টপ্রসেন্ট / @ কলাম নম্বর;

— রিয়েলটিবো

কি দারুন ! আমি সত্যিই এই সমাধান দ্বারা মুগ্ধ। আমি আমার পরিস্থিতির সাথে খাপ

— খাইয়ে

Answer 12

এই সমস্যাটি সিএসএস গ্রিড ব্যবহার করে আমার জন্য সমাধান করা হয়েছিল,

এই সমাধানটি তখনই প্রযোজ্য যখন আপনার কাছে কলামগুলির স্থির সংখ্যা রয়েছে অর্থাৎ না। একক সারিতে প্রদর্শন করার জন্য উপাদানগুলির

-> গ্রিড ব্যবহার করে তবে সারিগুলির সংখ্যা নির্দিষ্ট করে না, কারণ উপাদানগুলির সংখ্যা এটি কলামগুলিতে আবৃত করে এবং সারণীগুলিকে গতিশীলভাবে যুক্ত করে, আমি এই উদাহরণে তিনটি কলাম নির্দিষ্ট করেছি

-> আপনার সন্তানের / কোষগুলিতে আপনাকে কোনও অবস্থান দেওয়ার দরকার নেই, কারণ এটি এটি ঠিক করে দেবে, যা আমরা চাই না।

.grid-class{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 80px;
}

Answer 13

এই সংস্করণটি নির্দিষ্ট প্রস্থ সহ ব্লকগুলির জন্য সর্বোত্তম উপায়:

http://codepen.io/7iomka/pen/oxxeNE

অন্যান্য ক্ষেত্রে - ডালগার্ডের সংস্করণ

http://codepen.io/dalgard/pen/Dbnus

body {
  padding: 5%;
}

div {
  overflow: hidden;
  background-color: yellow;
}

ul {
  display: flex;
  flex-wrap: wrap;
justify-content:center;
  margin: 0 -4px -4px 0;
  list-style: none;
  padding: 0;
}

li {
  flex: 1 0 200px;
  height: 200px;
  max-width:200px;
  min-width:200px;
  border-right: 4px solid black;
  border-bottom: 4px solid black;
  background-color: deeppink;
}
li:empty {
  height: 0;
  border: none;
}

*,
:before,
:after {
  box-sizing: border-box;
}

<div>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
    <li>j</li>
    <li>k</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

Answer 14

ফ্লেক্সবক্স ছাড়াই একটি উপায় রয়েছে, যদিও আপনাকে নিম্নলিখিত শর্তগুলি পূরণ করতে হবে। 1) ধারক প্যাডিং আছে। 2) আইটেমগুলি একই আকার এবং আপনি প্রতি লাইনে কত চান তা ঠিক জানেন।

ul {
  padding: 0 3% 0 5%;
}
li {
  display: inline-block; 
  padding: 0 2% 2% 0;
  width: 28.66%;
}

ধারকটির ডানদিকে ছোট প্যাডিং প্রতিটি তালিকার আইটেমের ডানদিকে অতিরিক্ত প্যাডিংয়ের অনুমতি দেয়। তালিকার অবজেক্ট হিসাবে একই প্যারেন্টে অন্যান্য আইটেমগুলি 0 5% দিয়ে প্যাড করা হয়েছে বলে ধরে নিলে এটি তাদের সাথে ফ্লাশ হবে। আপনি শতাংশটি সামঞ্জস্য করতে পারেন তবে আপনি চান এমন মার্জিনে বা পিক্সের গণনা গণনা করতে চান use

অবশ্যই, আপনি প্রতিটি তৃতীয় বাক্সের মার্জিন অপসারণ করতে নবম চাইল্ড (আই 9+) ব্যবহার করে পাত্রে প্যাডিং ছাড়াই এটি করতে পারেন।

Answer 15

ফ্লেক্সবক্স এবং কয়েকটি মিডিয়া ক্যোয়ারী ব্যবহার করে, আমি এই সামান্য কাজটি করেছি: http://codepen.io/una/pen/yNEGjv (এটি কিছুটা হ্যাকি কিন্তু কাজ করে):

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.item {
  background-color: gray;
  height: 300px;
  flex: 0 30%;
  margin: 10px;

  @media (max-width: 700px) {
     flex: 0 45%;
  }

  @media (max-width: 420px) {
    flex: 0 100%;
  }

  &:nth-child(3n-1) {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Answer 16

আমি এটির জন্য একটি এসসিএসএস মিক্সিন তৈরি করেছি।

@mixin last-row-flexbox($num-columns, $width-items){

  $filled-space: $width-items * $num-columns;
  $margin: calc((100% - #{$filled-space}) / (#{$num-columns} - 1));

  $num-cols-1 : $num-columns - 1;

  &:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
    margin-left: $margin;
  }
  @for $i from 1 through $num-columns - 2 { 
    $index: $num-columns - $i;
    &:nth-child(#{$num-columns}n+#{$index}):last-child{
      margin-right: auto;
    }
  }
}

এটি কোডেপ লিঙ্ক: http://codepen.io/diana_aceves/pen/KVGNZg

আপনাকে কেবল আইটেমগুলির প্রস্থটি শতাংশ এবং কলামের সংখ্যায় সেট করতে হবে।

আমি আশা করি এটা তোমাকে সাহায্য করবে।

Answer 17

এখানে আরও কয়েকটি দম্পতির মিশ্রিত মিশ্রণ রয়েছে।

এই মিশ্রণগুলি ধরে নিয়েছে যে আপনি আইসোটোপের মতো জেএস প্লাগইন ব্যবহার করছেন না (তারা এইচটিএমএল মার্কআপ ক্রমকে সম্মান করে না, এইভাবে সিএসএস এনটিএম বিধিগুলির সাথে ঝামেলা করে)।

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

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

কোডটি এখানে:

// apply to the container (for ex. <UL> element)
@mixin flexbox_grid($columns, $gutter_width){

  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: flex-start;

  > *{
    @include flexbox_cell($columns, $gutter_width);
  }
}

// apply to the cell (for ex. a <LI> element)
@mixin flexbox_cell($columns, $gutter_width){
  $base_width: 100 / $columns;
  $gutters: $columns - 1;
  $gutter_offset: $gutter_width * $gutters / $columns;

  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto; // IE10 doesn't support calc() here

  box-sizing:border-box; // so you can freely apply borders/paddings to items
  width: calc( #{$base_width}% - #{$gutter_offset} );

  // remove useless margins (for cascading breakponts)
  &:nth-child(#{$columns}n){
    margin-right: 0;
  }

  // apply margin
  @for $i from 0 through ($gutters){
    @if($i != 0){
      &:nth-child(#{$columns}n+#{$i}){
        margin-right: $gutter_width;
      }
    }
  }
}

ব্যবহার:

ul{
   // just this:
   @include flexbox_grid(3,20px);
}

// and maybe in following breakpoints, 
// where the container is already setted up, 
// just change only the cells:

li{
   @include flexbox_cell(4,40px);
}

স্পষ্টতই, অবশেষে ধারকটির প্যাডিং / মার্জিন / প্রস্থ এবং ঘরের নীচের মার্জিনগুলি এবং এর মতো সেট করা আপনার পক্ষে।

আশা করি এটা সাহায্য করবে!

Answer 18

এটি বেশ হ্যাকি, তবে এটি আমার পক্ষে কাজ করে। আমি ধারাবাহিক ব্যবধান / মার্জিন অর্জনের চেষ্টা করছিলাম।

.grid {
  width: 1024px;
  display: flex;
  flex-flow: row wrap;
  padding: 32px;
  background-color: #ddd;  

  &:after {
    content: "";
    flex: auto;
    margin-left:-1%;
  }

  .item {
    flex: 1 0 24.25%;
    max-width: 24.25%;
    margin-bottom: 10px;
    text-align: center;
    background-color: #bbb;

    &:nth-child(4n+2),
    &:nth-child(4n+3),
    &:nth-child(4n+4) {
      margin-left: 1%;
    }

    &:nth-child(4n+1):nth-last-child(-n+4),
      &:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
        margin-bottom: 0;
    }    

  }
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

Answer 19

দেখে মনে হচ্ছে কেউ গত আইটেমটির উপর ফ্লেক্স-গ্রোথ সমাধান প্রস্তাব করেনি। এই ধারণাটি হ'ল আপনার শেষ ফ্লেক্স আইটেমটি ফ্লেক্স-গ্রো ব্যবহার করে এটি করতে পারে এমন সমস্ত জায়গা নেওয়ার জন্য: 1।

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid > *:last-child {
  flex-grow: 1;
}

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

Answer 20

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

মার্কআপটি এখানে:

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.flex-container:after {
  content: "";
  flex-basis: 30%;
}

Comments

আরও জেনেরিক হওয়ার জন্য: ফ্লেক্স-বেসের আকারটি বাচ্চাদের আকারের সমান হতে হবে।

— খ্রিস্টান টফফোলিও

আমি যে কোনও কলামের জন্য কাজের flex-grow: 0.9পরিবর্তে খুঁজে পেয়েছি flex-basis। আধুনিক ব্রাউজারগুলির একগুচ্ছ পরীক্ষিত - এটি আইডিতে প্যাডিংটি ভেঙে সমস্তগুলিতে কাজ করে তবে (তবে এজতে0

— পাতাবুজেনে

Answer 21

ধরে নেওয়া যাক:

• মোড়ানো সহ আপনি 4 টি কলাম গ্রিড বিন্যাস চান
• আইটেমের সংখ্যা অগত্যা 4 এর একাধিক নয়

1 ম, 5 তম এবং 9 ম আইটেম বাদে প্রতিটি আইটেমের বাম মার্জিন সেট করুন। যদি বাম মার্জিনটি 10px হয় তবে প্রতিটি সারিতে 4 টি আইটেমের মধ্যে 30px মার্জিন বিতরণ করা হবে। আইটেমের জন্য শতাংশের প্রস্থ নীচের হিসাবে গণনা করা হয়:

100% / 4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

এটি ফ্লেক্সবক্সের শেষ সারি জড়িত ইস্যুগুলির জন্য একটি শালীন কাজ।

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 1em 0 3em;
  background-color: peachpuff;
}

.item {
  margin-left: 10px;
  border: 1px solid;
  padding: 10px;
  width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
  background-color: papayawhip;
}

.item:nth-child(4n + 1) {
  margin-left: 0;
}

.item:nth-child(n + 5) {
  margin-top: 10px;
}

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>
<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

Answer 22

আপনি যদি সারিটির উপাদানগুলির মধ্যে শূন্যস্থানের প্রশস্ততা এবং একটি সারিতে উপাদানগুলির পরিমাণ জানেন তবে এটি কাজ করবে:

উদাহরণ: একটি সারিতে 3 টি উপাদান, উপাদানগুলির মধ্যে 10px ফাঁক

div:last-child:nth-child(3n+2) {
  flex-grow: 1
  margin-left: 10px
}

Answer 23

খালি ডিভ যুক্ত করতে কেবল জ্যাকুয়ারি / জাভাস্ক্রিপ্ট ট্রিকটি ব্যবহার করুন:

if($('.exposegrid').length%3==2){
 $(".exposegrid").append('<div class="exposetab"></div>');
}

Answer 24

ওহ ছেলে, আমি মনে করি যে আমি ন্যূনতম সিএসএস দিয়ে একটি ভাল সমাধান পেয়েছি এবং কোনও জেএস নেই। এটা দেখ:

img {width:100%;}
li {
  display: inline-block;
  width:8em;
  list-style:none;
}
ul {text-align: justify;}

<ul>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li>
    <img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

এখানে মূল কীটি মনে রাখতে হবে যে আমরা যা অর্জন করার চেষ্টা করছি তা হ'ল text-align: justify করে!

এইচটিএমএলের খালি উপাদানগুলি উপস্থিতি পরিবর্তন না করেই শেষ সারিটি পুরোপুরি প্রদর্শন করতে পারে তবে আপনি যা অর্জন করার চেষ্টা করছেন তা প্রদত্ত হতে পারে না। প্রতিটি পরিস্থিতিতে নিখুঁত ভারসাম্যের জন্য আপনার কমপক্ষে x-4 খালি উপাদান প্রয়োজন, x প্রদর্শিত হওয়া উপাদানগুলির সংখ্যা, বা n-2, n আপনার প্রদর্শিত কলামের সংখ্যা।

Answer 25

শেষে 0 পিক্সেল উচ্চতার সেট ব্যতীত একই বৈশিষ্ট্যযুক্ত কয়েকটি জাল আইটেম যুক্ত করুন।

Comments

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

— একসাপসি

Answer 26

আপনি চান সারিবদ্ধ

align-content: flex-start;পরিবর্তে ব্যবহার করুনjustify-content: space-between;

এটি আইটেমগুলিকে সর্বশেষ সারিতে বাম দিকে টেনে নিয়ে যায় এবং একই সাথে স্থানটি সমানভাবে বিতরণ করে,

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  /*justify-content: space-between; remove this line!!!! */ 
}

https://codepen.io/anon/pen/aQggBW?editors=1100

---

danAnderson সমাধান ডায়নামিক নয় İ

আইটেমের প্রস্থ 25 থেকে 28 এ পরিবর্তিত হয়ে অ্যান্ডারসন চিত্রগুলির মধ্যে স্থান ব্যর্থ করে

danAnderson: https://codepen.io/anon/pen/ZwYPmB?editors=1100

গতিশীল: https://codepen.io/anon/pen/aQggBW?editors=1100

বলার চেষ্টা করছিল কি iv। ড্যানস হ্যাকি .....

Answer 27

আমি justify-content: space-betweenএটি পাত্রে দিয়ে করতে সক্ষম হয়েছি