মাল্টি-লাইন ফ্লেক্সবক্স বিন্যাসে লাইন বিরতি কীভাবে নির্দিষ্ট করবেন?

Question

একাধিক লাইনের ফ্লেক্সবক্সে লাইন ব্রেক করার কোনও উপায় আছে কি?

উদাহরণস্বরূপ এই কোডপেনে প্রতিটি তৃতীয় আইটেম পরে বিরতি ।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) {
  background: silver;
}

<div class="container">
  <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 class="item">10</div>
</div>

মত

.item:nth-child(3n){
  /* line-break: after; */    
}

Comments

আমার একই বা খুব অনুরূপ সমস্যা ছিল; আমি প্রতি চতুর্থ আইটেমটি ভেঙে ফেলতে চেয়েছিলাম যাতে আমি প্রতিটি ফ্লেক্স আইটেমের প্রস্থকে 25vw (বা 25%) এ সেট করি। সুতরাং আপনার ক্ষেত্রে, প্রতি তৃতীয় আইটেমের জন্য আপনি 33.3vw (বা 33.3%) ব্যবহার করবেন। আমি যা চাই তার জন্য নিখুঁতভাবে কাজ করেছি। যদি অন্য কোনও সহজ পদ্ধতির সন্ধান করে তবে অন্য কাউকে সহায়তা করতে পারে।

— বেন ক্লার্ক

বেন ক্লার্ক! তোমাকে অনেক ধন্যবাদ! আপনার উত্তরটি কেবলমাত্র কাজ করেছে। আপনি এটি একটি উত্তর হিসাবে যুক্ত বিবেচনা করতে পারেন। :-)

— Itmuckel

সংশ্লিষ্ট: stackoverflow.com/q/4609279/405017

— Phrogz

Answer 1

সবচেয়ে সহজ এবং নির্ভরযোগ্য সমাধান হ'ল সঠিক জায়গায় ফ্লেক্স আইটেম inোকানো। যদি তারা যথেষ্ট প্রশস্ত হয় ( width: 100%), তারা একটি লাইন বিরতিতে বাধ্য করবে।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(4n - 1) {
  background: silver;
}
.line-break {
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="line-break"></div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="line-break"></div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="line-break"></div>
  <div class="item">10</div>
</div>

তবে এটি কুৎসিত এবং শব্দার্থক নয়। পরিবর্তে, আমরা ফ্লেক্স ধারকটির ভিতরে সিউডো-উপাদান তৈরি করতে orderপারি এবং সেগুলি সঠিক স্থানে সরিয়ে নিতে ব্যবহার করতে পারি।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  background: silver;
}
.container::before, .container::after {
  content: '';
  width: 100%;
  order: 1;
}
.item:nth-child(n + 4) {
  order: 1;
}
.item:nth-child(n + 7) {
  order: 2;
}

<div class="container">
  <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>

তবে একটি সীমাবদ্ধতা রয়েছে: ফ্লেক্স ধারকটিতে কেবল একটি ::beforeএবং ::afterছদ্ম-উপাদান থাকতে পারে। তার মানে আপনি কেবল 2 লাইন বিরতি জোর করতে পারবেন।

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

তবে ভাগ্যক্রমে, সিএসএস ডিসপ্লে এল 3 চালু করেছে display: contents(বর্তমানে কেবল ফায়ারফক্স 37 দ্বারা সমর্থিত):

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

সুতরাং আপনি display: contentsফ্লেক্স পাত্রে বাচ্চাদের জন্য আবেদন করতে পারেন এবং প্রত্যেকের সামগ্রীতে অতিরিক্ত মোড়কের ভিতরে গুটিয়ে রাখতে পারেন। তারপরে, ফ্লেক্স আইটেমগুলি সেই অতিরিক্ত মোড়ক এবং বাচ্চাদের সিউডো-উপাদানগুলি হবে।

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  display: contents;
}
.item > div {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n) > div {
  background: silver;
}
.item:nth-child(3n)::after {
  content: '';
  width: 100%;
}

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

অন্যথা, অনুযায়ী Fragmenting ফ্লেক্স লেআউট এবং CSS এর ফ্র্যাগমেন্টেশন , flexbox বিরতি ব্যবহার করে জোর করে অনুমতি দেয় break-before, break-afterঅথবা তাদের সিএসএস 2.1 alias লেখা:

.item:nth-child(3n) {
  page-break-after: always; /* CSS 2.1 syntax */
  break-after: always; /* New syntax */
}

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n) {
  page-break-after: always;
  background: silver;
}

<div class="container">
  <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 class="item">10</div>
</div>

ফ্লেক্সবক্সে জোর করে রেখা বিরতি এখনও ব্যাপকভাবে সমর্থিত নয়, তবে এটি ফায়ারফক্সে কাজ করে।

Comments

@ অরিওল প্রথম পদ্ধতির বিষয়ে, কেন আপনি বলেন যে এটি কুরুচিপূর্ণ এবং শব্দার্থক নয়? উৎসুক.

— nacho4d

@ nacho4d কারণ স্টাইলিংয়ের উদ্দেশ্যে এইচটিএমএলটি পরিবর্তন করা উচিত নয়। এবং যদি আপনি নিজের মতামত পরিবর্তন করেন এবং সিদ্ধান্ত নেন যে আপনি 3 এর পরিবর্তে 4 টি কলাম চান, আপনার সম্ভবত প্রচুর এইচটিএমএল সংশোধন করতে হবে। break-afterসমাধানটির সাথে তুলনা করুন , যার জন্য কেবল স্টাইলশিটে কোনও নির্বাচককে সংশোধন করতে হবে।

— অরিওল

আমি যোগ করা প্রয়োজন display: block;করতে .container ::beforeএবং ::afterছদ্ম শ্রেণীর IE তে সমাধান দুই নম্বর কাজ করা। YMMV!

— নক্শা

@ টিউইনড এটি আশ্চর্যজনক, কারণ ফ্লেক্স আইটেমগুলি স্বয়ংক্রিয়ভাবে ব্লক করা উচিত।

— ওরিওল

যেহেতু পৃষ্ঠা-বিরতি জিনিসটি স্পষ্টতই চশমা থেকে সরানো হয়েছিল, তাই আপনার দ্বিতীয় স্নিপেটটি কলামের দিকে চালানো সম্ভব এবং এটির ধারকটির উচ্চতা প্রসারিত না করা কি সম্ভব? আমার কোনও ভাগ্য নেই এবং 100% / আইটেমগুলির উচ্চতা প্রসারিত করতে ফ্লেক্স-ভিত্তিক সেট করা নেই।

— লুসেন্ট

Answer 2

আমার দৃষ্টিকোণ থেকে ফ্লেক্স আইটেমগুলির মধ্যে <hr> লাইন বিরতি হিসাবে উপাদানগুলি ব্যবহার করা আরও অর্থপূর্ণ ।

.container {
  display: flex;
  flex-flow: wrap;
}

.container hr {
  width: 100%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <hr>
  <div>3</div>
  <div>2</div>
  ...
</div>

ক্রোম 66, ফায়ারফক্স 60 এবং সাফারি 11-তে পরীক্ষিত।

Comments

এইভাবে আমি এটিও করি, দুর্দান্ত কাজ করে। ঘন্টা যুক্ত করা {ফ্লেক্স-ভিত্তি: 100%; উচ্চতা: 0; মার্জিন: 0; সীমানা: 0; the বিরতি নির্বিঘ্নে করে তোলে।

— বেসওয়ার্ক

আমি এই পদ্ধতির পছন্দ। দ্রষ্টব্য: gap: 10px;সারিগুলির মধ্যে দূরত্ব ব্যবহার করার সময় আসলে 20px। ঠিকানার সাথে, অর্ধেক যে আকারের একটি সারি ফাঁক উল্লেখ করুন: gap: 5px 10px;।

— CuddleBunny

@ বেবার্কস: এর পরিবর্তে borderসেট করা উচিতnone0

— চিহ্নিত করুন

@ চিহ্ন, border:0;ঠিক তেমন বৈধ border:none;। : দেখুন stackoverflow.com/questions/2922909/...

— Besworks

Answer 3

@Oriol দুঃখিতভাবে অক্টোবর 2017 থেকে, একটি চমৎকার উত্তর আছে, তন্ন তন্ন display:contents, তন্ন তন্ন page-break-afterব্যাপকভাবে সমর্থিত, ভাল বলেন, এটি ফায়ারফক্স যা এই কিন্তু অন্যান্য খেলোয়াড়দের সমর্থন সম্পর্কে, আমি সঙ্গে আসা পর্যন্ত নিম্নলিখিত "হ্যাক" যা আমি হার্ড চেয়ে ভাল বিবেচনা প্রতি তৃতীয় উপাদানগুলির পরে একটি বিরতিতে কোডিং করা, কারণ এটি পৃষ্ঠাটিকে মোবাইল বান্ধব করে তোলা খুব কঠিন করে তুলবে।

যেমনটি বলা হয়েছে এটি একটি হ্যাক এবং এর অপূর্ণতা হ'ল আপনাকে কিছুই না করার জন্য যথেষ্ট পরিমাণে অতিরিক্ত উপাদান যুক্ত করতে হবে, তবে এটি কৌশলটি করে এবং তৃতীয় আই 11 এও ক্রস ব্রাউজারে কাজ করে।

"হ্যাক" হ'ল প্রতিটি ডিভের পরে কেবলমাত্র একটি অতিরিক্ত উপাদান যুক্ত করা হয় যা সেটাকে সেট করা হয় display:noneএবং তারপরে nth-childকোনটি আসলে একটি লাইনের ব্রেকটিকে বাধ্য করে দৃশ্যমান করা উচিত তা সিদ্ধান্ত নিতে সিএসএস ব্যবহার করে :

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}
.item:nth-child(3n-1) {
  background: silver;
}
.breaker {display:none;}
.breaker:nth-child(3n) {
  display:block;
  width:100%;
  height:0;
 }

<div class="container">
  <div class="item">1</div><p class=breaker></p>
  <div class="item">2</div><p class=breaker></p>
  <div class="item">3</div><p class=breaker></p>
  <div class="item">4</div><p class=breaker></p>
  <div class="item">5</div><p class=breaker></p>
  <div class="item">6</div><p class=breaker></p>
  <div class="item">7</div><p class=breaker></p>
  <div class="item">8</div><p class=breaker></p>
  <div class="item">9</div><p class=breaker></p>
  <div class="item">10</div><p class=breaker></p>
</div>

Comments

আমি আরও দেখতে পেলাম যে "প্রদর্শন: সামগ্রী" এবং "পৃষ্ঠা-বিরতি" পরে পদ্ধতিগুলি কাজ করছে না এবং এই "হ্যাক" এর আশ্রয় নিয়েছে। এই একটি Chrome বাগ হিসাবে রিপোর্ট করা হয়েছিল, এবং হিসাবে "WontFix" (দেখুন হিসাবে চিহ্নিত bugs.chromium.org/p/chromium/issues/detail?id=473481 ) ব্যাখ্যা: "কোন সিএসএস ওয়ার্কিং গ্রুপ অনুযায়ী, এখন পর্যন্ত CSS এর সাথে একটি ফ্লেক্স বাক্সে একটি লাইন বিরতিতে বাধ্য করার বর্তমান উপায়। "

— মার্টিন_ডাব্লু

আপনি নির্বাচক ব্যবহার করে বিশৃঙ্খলা স্পর্শ সংরক্ষণ করতে পারে .container>p। তারপরে এই সমস্ত <p></p>ট্যাগগুলির জন্য classগুণকের প্রয়োজন হবে না । অবশ্যই গুরুত্বপূর্ণ নয় । কেবলমাত্র আমার অলস মস্তিষ্ক আপনার চতুর সমাধানের জন্য একটি ক্ষুদ্র, স্থান-সাশ্রয়কারী টুইট সন্ধান করছে। অবশ্যই এটি ডিভের <p>সরাসরি বাচ্চাদের হিসাবে অন্য কোনও ট্যাগ না থাকা ব্যবহারকারীর উপর নির্ভর করে .container। প্রযুক্তিগতভাবে আপনি অন্যান্য সমস্ত <div>বাচ্চাদের সাথেও একই কাজ করতে পারেন তবে আপনি যে বয়সের তুলনায় <div>তার .containerচেয়ে অনেক বেশি হবেন <p>সম্ভবত, সেখানে কোনও স্মার্ট পদক্ষেপ নেই।

— স্টিভ

Answer 4

আপনি একটি শব্দার্থিক লাইন ব্রেক চাই?

তারপরে ব্যবহার বিবেচনা করুন <br>। ডাব্লু 3 স্কুলগুলি আপনাকে BRকেবল কবিতা লেখার জন্য পরামর্শ দিতে পারে (আমার শীঘ্রই আসবে) তবে আপনি স্টাইলটি পরিবর্তন করতে পারেন যাতে এটি 100% প্রস্থের ব্লক উপাদান হিসাবে আচরণ করে যা আপনার সামগ্রীটি পরবর্তী লাইনে ঠেলে দেবে। যদি 'বিআর' বিরতি প্রস্তাব করে তবে এটি ব্যবহার করা hrবা ১০০% এর চেয়ে আমার কাছে বেশি উপযুক্ত বলে মনে হয় divএবং এইচটিএমএলকে আরও পঠনযোগ্য করে তোলে।

আপনার <br>যেখানে লাইনব্রেকগুলি প্রয়োজন সেখানে প্রবেশ করুন এবং এটি পছন্দ করুন।

 // Use `>` to avoid styling `<br>` inside your boxes 
 .container > br 
 {
    width: 100%;
    content: '';
 }

আপনি করতে পারেন অক্ষম <br>মিডিয়া প্রশ্নের সঙ্গে সেট করে, display:করতে blockবা noneযথাযথ হিসাবে (আমি এই একটি উদাহরণ অন্তর্ভুক্ত করেছি কিন্তু এটার মন্তব্য বামে)।

order:খুব প্রয়োজন হলে অর্ডার সেট করতেও আপনি ব্যবহার করতে পারেন ।

এবং আপনি বিভিন্ন ক্লাস বা নাম সহ যতগুলি চান হিসাবে রাখতে পারেন :-)

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.item {
  width: 100px;
  background: gold;
  height: 100px;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px
}

.container > br
{
  width: 100%;
  content: '';
}

// .linebreak1 
// { 
//    display: none;
// }

// @media (min-width: 768px) 
// {
//    .linebreak1
//    {
//       display: block;
//    }
// }

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <br class="linebreak1"/>
  <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 class="item">10</div>
</div>

---

ডাব্লু 3 স্কুলগুলি কী বলে নিজেকে সীমাবদ্ধ করার দরকার নেই:

Comments

কৌশলটির একটি এক্সটেনশন হ'ল প্রতি তৃতীয় <br class="2col">পরে প্রতি দ্বিতীয় আইটেমের পরে put <br class="3col">তারপরে ধারকটিতে একটি ক্লাস প্রয়োগ করুন cols-2এবং কেবলমাত্র সেই সংখ্যক কলামের জন্য উপযুক্ত লাইনব্র্যাকগুলি সক্ষম করতে সিএসএস তৈরি করুন। যেমন। br { display: none; } .cols-2 br.2col { display: block; }

— সাইমন_উইভার

না, একটি brলাইন ভাঙা উপাদানগুলির জন্য নয় , এটি পাঠ্যের জন্য : ডেভেলপার.মোজিলা.আর.ইন.ইউএস / ডকস

— এইচটিএমএল /

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

— সাইমন_উইভার

হ্যাঁ ... একটি কবিতা ভাল লাগবে, এখানে একটি লিঙ্ক পোস্ট করতে ভুলবেন না :) :) একটি নিখুঁত সমাধান সম্পর্কে, একটি আছে ( break-*স্বীকৃত উত্তরে দেখানো হয়েছে) যদিও দুর্ভাগ্যক্রমে এটি এখনও ক্রস ব্রাউজারগুলিতে পৌঁছেনি সুতরাং দ্বিতীয়টি হ'ল এমন উপাদান ব্যবহার করা যা তার পিতামাতার প্রস্থটি স্থানীয়ভাবে পূরণ করুন এবং পরবর্তী কোনও ভাইবোনকে নিজের সারিতে চাপ দিন, যা আবার গৃহীত উত্তরে দেওয়া হয়। সুতরাং ব্লকের মতো অন্য যে কোনও একটি উপাদান ব্যবহার করে, এর মত খারাপ শব্দার্থগতভাবে খারাপ হতে পারে br।

— আসন

মনে রাখবেন, আপনি ডাব্লু 3 সি স্কুল নয়, ডাব্লু 3 স্কুলগুলির একটি মুদ্রণ পোস্ট করেন, তারা সংযুক্ত নেই।

— এডু রুইজ

Answer 5

আমি মনে করি traditionalতিহ্যবাহী পদ্ধতিটি নমনীয় এবং বোঝার পক্ষে মোটামুটি সহজ:

মার্কআপ

<div class="flex-grid">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>

    <div class="col-3">.col-3</div>
    <div class="col-9">.col-9</div>

    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
</div>

গ্রিড.এসএস ফাইল তৈরি করুন:

.flex-grid {
  display: flex;
  flex-flow: wrap;
}

.col-1 {flex: 0 0 8.3333%}
.col-2 {flex: 0 0 16.6666%}
.col-3 {flex: 0 0 25%}
.col-4 {flex: 0 0 33.3333%}
.col-5 {flex: 0 0 41.6666%}
.col-6 {flex: 0 0 50%}
.col-7 {flex: 0 0 58.3333%}
.col-8 {flex: 0 0 66.6666%}
.col-9 {flex: 0 0 75%}
.col-10 {flex: 0 0 83.3333%}
.col-11 {flex: 0 0 91.6666%}
.col-12 {flex: 0 0 100%}

[class*="col-"] {
  margin: 0 0 10px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}

আমি একটি উদাহরণ তৈরি করেছি (jsfiddle)

400px এর অধীনে উইন্ডোটির আকার পরিবর্তন করার চেষ্টা করুন, এটি প্রতিক্রিয়াশীল !!

Comments

এই সমাধানে উপাদানগুলি এক সাথে থাকে, ধারণাটি তাদের মধ্যে একটি দীর্ঘ ফাঁকা স্থান রয়েছে।

— জুয়ানমা মেনেন্ডেজ

Answer 6

আর একটি সম্ভাব্য সমাধান যা অতিরিক্ত কোনও মার্কআপ যুক্ত করার প্রয়োজন হয় না তা হ'ল উপাদানগুলিকে পৃথক করার জন্য কিছু গতিশীল মার্জিন যুক্ত করা।

উদাহরণস্বরূপ ক্ষেত্রে, এই সাহায্যে কাজ করা যেতে পারে calc(), শুধু যোগ margin-leftএবং margin-right3N +2 উপাদান (2, 5, 8) থেকে

.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

স্নিপেট উদাহরণ

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}
.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}
.item:nth-child(3n+2) {
  background: silver;
  margin: 10px calc(50% - 175px);
}

<div class="container">
  <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 class="item">10</div>
</div>

Comments

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

— stwilz

আমি এটি আরও ভাল পছন্দ করি, কেবলমাত্র margin-right: 1pxআইটেমটি এবং এটি পরবর্তী আইটেমটিকে একটি নতুন সারিতে শুরু করবে।

— আর্ভিল

Answer 7

ভবিষ্যতের প্রশ্নের জন্য, floatসম্পত্তি ব্যবহার করে এবং এটি প্রতিটি 3 উপাদানগুলিতে সাফ করে এটি করা সম্ভব ।

এখানে আমি তৈরি একটি উদাহরণ।

.grid {
  display: inline-block;
}

.cell {
  display: inline-block;
  position: relative;
  float: left;
  margin: 8px;
  width: 48px;
  height: 48px;
  background-color: #bdbdbd;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-indent: 4px;
  color: #fff;
}

.cell:nth-child(3n) + .cell {
  clear: both;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
</div>

Comments

এখানে সমস্যাটি ওপি জানিয়েছে সমাধানটিতে ফ্লেক্সবক্স ব্যবহার করতে হবে বা display: flex;নয়display: inline-block;

— বাফ্রোমকা

আপনি .cell:nth-child(3n + 1)পরিবর্তে লিখতে পারেন

— Si7ius

Answer 8

আমি এখানে বেশ কয়েকটি উত্তর চেষ্টা করেছি, এবং তাদের কোনওটিই কাজ করে নি। হাস্যকরভাবে, কাজটি কী ছিল যার সবচেয়ে সহজ বিকল্পটির বিষয়ে <br/>চেষ্টা করা যেতে পারে:

<div style="flex-basis: 100%;"></div>

অথবা আপনি এটি করতে পারেন:

<div style="width: 100%;"></div>

আপনি যেখানে নতুন লাইন চান সেখানে রাখুন। এটি এমনকি সংলগ্নদের সাথেও কাজ করছে বলে মনে হচ্ছে <span>, তবে আমি এটি সংলগ্নের সাথে ব্যবহার করছি <div>।

Comments

100%-প্রস্থের ডিভগুলি হ'ল গৃহীত উত্তরে দেওয়া প্রথম সমাধান।

— টাইলারহ

সত্য, এক ধরনের। দুর্বল কারণে (কুরুচিপূর্ণ, সত্যিই?) তারা তাদের দিকে তাকাচ্ছে। এছাড়াও, আমার উত্তর আছে flex-basis।

— অ্যান্ড্রু

Answer 9

.container {
  background: tomato;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: space-between;
}

.item {
  width: 100px;
  height: 100px;
  background: gold;
  border: 1px solid black;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
  margin: 10px;
}

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

আপনি এখানে মত একটি ডোম উপাদান আইটেম মোড়ানো চেষ্টা করতে পারেন। এটির সাথে আপনাকে অনেকগুলি সিএসএস জানতে হবে না কেবল একটি ভাল কাঠামো থাকার ফলে সমস্যার সমাধান হবে।

Comments

আপনি display: blockধারককে একটি সাধারণ করে তুলতে পারেন এবং সেই নতুন স্তর 2 ডিভ্স ফ্লেক্সবক্স তৈরি করতে পারেন। এটি সারিগুলির জন্য কাজ করে। কলাম মোড ব্যবহার করার সময় স্প্যানগুলির সাথে ডিভগুলি প্রতিস্থাপন করুন।

— jiggunjer