776

Flexbox আইটেম আমি ব্যবহার করছি মধ্যে ন্যূনতম দূরত্ব সেট করতে margin: 0 5pxউপর .itemএবং margin: 0 -5pxধারক উপর। আমার কাছে এটি হ্যাকের মতো মনে হচ্ছে তবে এটি করার কোনও ভাল উপায় আমি খুঁজে পাচ্ছি না।

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  margin: 0 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

css flexbox

— সাশা কোস
সূত্র

28

এটি কোনও হ্যাক নয় - আইটেমগুলিকে সারিবদ্ধ করার জন্য এটি অন্যতম উদ্দেশ্যে পদ্ধতি। যদিও অন্যান্য সম্পত্তি আছে। দেখুন w3.org/TR/css3-flexbox/#alignment

— BoltClock

4

হ্যাঁ, আমি বুঝতে পেরেছি। তবে উদাহরণস্বরূপ কলাম-ফাঁক সম্পত্তি রয়েছে যা আমাদের ধারক থেকে দূরত্ব নিয়ন্ত্রণ করার ক্ষমতা দেয়: w3.org/TR/css3-multicol/#column-gap

— সাশা কোস

কারণ এটি ফ্লেক্সবক্সের একটি মার্জিন ধসে পড়েছে The অন্য প্রশ্নের ডানদিকে সঠিক উত্তর রয়েছে [আমি কীভাবে শেষ মার্জিনকে ফ্লেক্সবক্সে ডুবে যেতে পারি? ] ( স্ট্যাকওভারফ্লো.com / প্রশ্নগুলি / 38993170/… )

— জ্যাক ইয়াং

6

সিএসএস বক্স সারিবদ্ধতা মডিউল স্তর 3 একটি অধ্যায় অন্তর্ভুক্ত বাক্সে মধ্যে ফাঁক মাল্টি-কলাম উপাদান, যা প্রযোজ্য - আনমন পাত্রে , এবং গ্রিড পাত্রে। সুতরাং শেষ পর্যন্ত এটি সহজ হবে: row-gap: 5px- হয়ে গেছে।

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

2

@ জনক্র্যারেল ফায়ারফক্স ইতিমধ্যে gapফ্লেক্স পাত্রে ( ক্যানিউজ ) সম্পত্তি সমর্থন করে

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

426

ফ্লেক্সবক্সের সংঘাতের মার্জিন নেই।
টেবিলগুলির জন্য ফ্লেক্সবক্সের মতো কিছু নেই border-spacing( gapবেশিরভাগ ব্রাউজারগুলিতে ভালভাবে সমর্থিত সিএসএস সম্পত্তি ব্যতীত , ক্যানিজ )

অতএব আপনি যা চাইছেন তা অর্জন করা কিছুটা বেশি কঠিন।

আমার অভিজ্ঞতায়, "পরিষ্কারতম" উপায় যা ব্যবহার করে না :first-child/ :last-childএবং কোনও পরিবর্তন ছাড়াই কাজ করে তা পাত্রে এবং বাচ্চাদের উপর flex-wrap:wrapসেট padding:5pxকরা margin:5px। এটি 10pxপ্রতিটি সন্তানের এবং প্রতিটি সন্তানের এবং তাদের পিতামাতার মধ্যে একটি ব্যবধান তৈরি করবে ।

ডেমো

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

<div class="upper">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

<div class="upper mc">
  <div>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa<br/>aaa</div>
  <div>aaa<br/>aaa<br/>aaa</div>
  <div>aaa</div>
  <div>aaa</div>
</div>

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

— সমস্ত শ্রমিক অপরিহার্য
সূত্র

218

এটি প্রশ্নটির অনুরূপ কাজটি সম্পাদন করে না, আপনার ডানদিকে বাম এবং ডানদিকে একটি 10px ইনডেন্ট থাকবে, যা আমি ধরে নিচ্ছি যে তারা রাখবে না। সুতরাং, মূল প্রশ্নে নেতিবাচক মার্জিন।

— ক্রিস নিকোলা

17

orderসম্পত্তি সেট হলে কী হবে ? :first-child/:last-childপ্রত্যাশিত হিসাবে কাজ করবে না।

— গুরিয়া

4

"ফ্লেক্সবক্সের সংঘাতের মার্জিন নেই” " খুব অন্তর্দৃষ্টিপূর্ণ, এবং আপাত সত্য, তবে আমি কি একটি প্রশংসা চাইব?

— ছারভে

2

এটি কি মূল প্রশ্নের চেয়ে খারাপ উত্তর নয়? এই পদ্ধতির জন্য আপনার ধারকটির চারপাশে জায়গা থাকতে হবে এবং গ্যটারিং অবশ্যই সর্বদা একটি সংখ্যার হতে হবে।

— সীমাহীন

7

@ ছারভেয়ে, w3.org/TR/css-flexbox-1/#item-margins থেকে শুরু করে , "সংলগ্ন ফ্লেক্স আইটেমগুলির মার্জিনটি ভেঙে পড়ে না।"

— রোমলেম

195

এটি কোনও হ্যাক নয়। একই কৌশলটি বুটস্ট্র্যাপ এবং এর গ্রিড দ্বারাও ব্যবহৃত হয়, যদিও, মার্জিনের পরিবর্তে, বুটস্ট্র্যাপ তার কলসের জন্য প্যাডিং ব্যবহার করে।

.row {
  margin:0 -15px;
}
.col-xx-xx {
  padding:0 15px;
}

— রৌমেলিস জর্জ
সূত্র

1

এই পদ্ধতির একমাত্র সমস্যাটি পটভূমির রঙগুলির সাথে সমান উচ্চতার আইটেমগুলি বজায় রাখা। height:100%; width:100%আইটেমের প্যাডিং উপেক্ষা করে নিখুঁত অবস্থান ।

— স্টিভেন ওয়াচন

3

এখানে সমস্যা IE10 সঙ্গে নেই এবং 11. flex-basisমানের জন্য অ্যাকাউন্ট না box-sizing: border-box, তাই কোন প্যাডিং বা সীমানা সহ একটি শিশু পিতা বা মাতা ওভারফ্লো হবে (বা এই ক্ষেত্রে মোড়ানো)। উত্স

— কারসন

18

এই পদ্ধতির সাথে আরও একটি সমস্যা রয়েছে: এর মতো মার্জিনটি সামঞ্জস্য করা পৃষ্ঠার প্রস্থকে প্রসারিত করতে পারে। ডেমো: jsfiddle.net/a97tatf6/1

— নাথান ওসমান

4

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

— উইলিয়াম

15

অবশ্যই এটি একটি হ্যাক। কারণ বুটস্ট্র্যাপ এই পন্থাটি ব্যবহার করে না এটি একটি হ্যাক নয় মানে। এর অর্থ হ'ল বুটস্ট্র্যাপ হ্যাক ব্যবহার করে।

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

108

একাধিক সারি সমর্থন সহ ফ্লেক্সবক্স এবং সিএসএস ক্যালক

হ্যালো, সমস্ত ব্রাউজারগুলির ফ্লেক্সবক্সকে সমর্থন করার জন্য নীচে আমার কার্যকর সমাধান। কোনও নেতিবাচক মার্জিন নেই।

ফিডল ডেমো

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

.flexbox > div {
  /*
    1/3  - 3 columns per row
    10px - spacing between columns 
  */
  box-sizing: border-box;
  margin: 10px 10px 0 0;
  outline: 1px dotted red;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}

/*
  align last row columns to the left
  3n - 3 columns per row
*/
.flexbox > div:nth-child(3n) {
  margin-right: 0;
}

.flexbox::after {
  content: '';
  flex: auto;
}

/*
  remove top margin from first row
  -n+3 - 3 columns per row 
*/
.flexbox > div:nth-child(-n+3) {
  margin-top: 0;
}

<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>

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

একটি নোট নিন SASS ব্যবহার করে এই কোডটি আরও খাটো হতে পারে

2020.II.11 আপডেট করুন সর্বশেষ সারিতে বাম দিকে কলামযুক্ত করুন

2020.II.14 আপডেট করুন সর্বশেষ সারিতে মার্জিন-নীচে সরানো

— দারিউস সিকোরস্কি
সূত্র

13

আমি এই সমাধানটি পছন্দ করি তবে শেষ সারিতে কেবল 2 টি আইটেম থাকলে এটি ব্যর্থ হয়। আইটেমগুলি একসাথে স্ট্যাক করা হয় না কারণে justify-content।

— জেমস সাহসীভাবে

4

দুটি আইটেম ইস্যু ঠিক করতে কেবল পরিবর্তন করতে justify-content: space-evenly;বা justify-content: space-around;।

— পল রুনি

6

@ পলরুনি একাধিক তালিকাগুলি সহ সাইটে আপনি সর্বদা আইটেমের সংখ্যা জানেন না, যদি তালিকা কোনও সিএমএস দ্বারা তৈরি করা হয়।

— নিনজাফার্ট 14 'এ

1

@ 1.21gigawatts দয়া করে অন্য কারও কোড / উত্তরটিতে স্বেচ্ছাসেবী পরিবর্তন করবেন না; পরিবর্তে আপনার নিজের উত্তর লিখুন।

— টাইলারএইচ

2

পছন্দ করুন প্রশ্নটি জিজ্ঞাসা করল কীভাবে, "... ফ্লেক্সবক্স আইটেমগুলির মধ্যে দূরত্ব নির্ধারণ করা"। এই উত্তরটি জলের আকার দেখায় না। একটি পটভূমির রঙ সেট করা নর্দমা দেখায়। একটি সীমানা যুক্ত করা শেষ সারির নীচে মার্জিন রয়েছে।

— 1.21 গিগাওয়াটস

93

আপনি স্বচ্ছ সীমানা ব্যবহার করতে পারেন।

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

যেমন

.column{
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

এছাড়াও লক্ষ করুন যে আপনার min-width: 50px;ফ্লেক্সবক্সের প্রয়োজন need আনমন মডেল মাপ স্থির হ্যান্ডেল করতে হবে না যদি না আপনি কি flex: none;বিশেষ সন্তান উপাদান আপনি চান হিসাবে নির্দিষ্ট এবং সেইজন্য হওয়া থেকে বাদ উপর "flexi"। http://jsfiddle.net/GLpUp/4/ তবে এর সাথে সমস্ত কলাম এক সাথে flex:none;ফ্লেক্স মডেল নয়। এখানে একটি ফ্লেক্স মডেলের কাছাকাছি কিছু রয়েছে: http://jsfiddle.net/GLpUp/5/

সুতরাং আপনি যদি পুরানো ব্রাউজারগুলির জন্য টেবিল-সেল ফালব্যাকের প্রয়োজন না হয় তবে আপনি সাধারণত মার্জিনগুলি সাধারণত ব্যবহার করতে পারেন। http://jsfiddle.net/GLpUp/3/

background-clip: padding-box;পটভূমি ব্যবহার করার সময় সেটিং প্রয়োজনীয় হবে, অন্যথায় পটভূমি স্বচ্ছ সীমান্ত অঞ্চলে প্রবাহিত হবে।

— hexalys
সূত্র

5

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

— ইলিস

4

আপনি ব্যাকগ্রাউন্ড রঙ ব্যবহার করার সময় বাদে আপনার পটভূমি আপনার পছন্দসই সীমা ছাড়িয়ে গেছে।

— আহ্নবিজক্যাড

2

@ অ্যানবিজক্যাড বিভিন্ন ব্যাকগ্রাউন্ড রঙের সাথে ভাল, আপনি ব্যাকগ্রাউন্ডটি কোন ধরণের উপর নির্ভর করে সাদা বা পর্যাপ্ত রঙ ব্যবহার করতে পারেন।

— hexalys

27

@ অাহ্নবিজ্যাকড: আপনার যদি আইই 8 সমর্থন প্রয়োজন না হয় তবে এটি আরও ভাল সমাধান:background-clip: padding-box

— অ্যালবিন

5

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

— ব্রায়ান

74

একাধিক সারি বা কোনও সংখ্যক উপাদান থাকা সত্ত্বেও এই সমাধানটি সমস্ত ক্ষেত্রে কার্যকর হবে। তবে বিভাগটির গণনা একই হওয়া উচিত যা আপনি প্রথম সারিতে 4 চান এবং 3 দ্বিতীয় সারিতে এটি 4 content বিষয়বস্তুর স্থান ফাঁকা রাখবে এমনভাবে কাজ করবে না the

আমরা ব্যবহার করছি display: grid; এবং তার বৈশিষ্ট্য।

#box {
  display: grid;
  width: 100px;
  grid-gap: 5px;
  /* Space between items */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  /* Decide the number of columns and size */
}

.item {
  background: gray;
  width: 100%;
  /* width is not necessary only added this to understand that width works as 100% to the grid template allocated space **DEFAULT WIDTH WILL BE 100%** */
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

এই পদ্ধতির ডাউনসাইডটি মোবাইল অপেরা মিনিতে সমর্থিত হবে না এবং পিসিতে এটি কেবল আই 10 এর পরে কাজ করে ।

আইই ১১ সহ সম্পূর্ণ ব্রাউজারের সামঞ্জস্যের জন্য দ্রষ্টব্য দয়া করে অটোপ্রিফিক্সার ব্যবহার করুন

পুরানো উত্তর

এটি কোনও পুরানো সমাধান হিসাবে মনে করবেন না, এটি এখনও অন্যতম সেরা তবে যদি আপনি কেবলমাত্র একক সারির উপাদান চান এবং এটি সমস্ত ব্রাউজারের সাথে কাজ করবে।

এই পদ্ধতিটি সিএসএস ভাইবিলিং সংমিশ্রণ দ্বারা ব্যবহৃত হয় , তাই আপনি এটিকে আরও অনেক উপায়ে পরিচালনা করতে পারেন, তবে আপনার সংমিশ্রণটি ভুল হলে এটি সমস্যার কারণও হতে পারে।

.item+.item{
  margin-left: 5px;
}

নীচের কোডটি কৌশলটি করবে। এই পদ্ধতিতে দিতে কোন প্রয়োজন নেই margin: 0 -5px;করার#box মোড়কের।

আপনার জন্য একটি কাজের নমুনা:

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 22px;
  height: 50px;
}
.item+.item{
 margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

— Webber
সূত্র

চূড়ান্ত সারিতে কম আইটেম থাকলেও এটি সঠিকভাবে কাজ করে তা প্রমাণ করার জন্য আমি আপনার গ্রিড ভিত্তিক উত্তরটি সম্পাদনা করেছি। এটি সেক্ষেত্রে এটি কার্যকরভাবে প্রমাণ করে। (আপনি যদি এই পরিবর্তনটি পছন্দ করেন না তবে নির্দ্বিধায়

— টুলমেকারস্টেভ

এই প্রশ্ন অনুসারে তারা কেবল কোনও হ্যাক ছাড়াই শিশু উপাদানগুলির সাথে যথাযথভাবে জায়গাটি পূরণ করতে বলেছে, আমি যা করেছি গ্রিড ব্যবহার করে grid-template-columnsআমরা গতিবেগের সাথে সংজ্ঞায়িত না হওয়া হিসাবে সংজ্ঞা রাখতে পারি। আপনি মান দিতে সুতরাং যদি 1fr 1fr 1fr 1frতারপর তা DIV আছে বিভক্ত হবে 4fractionsএবং প্রতিটি সন্তানের উপাদান পূরণ করতে চেষ্টা fractionsএকমাত্র উপায় না না, আমার জ্ঞান grid। আমি উত্তরে যা বলেছি তা হ'ল যদি ব্যবহারকারীর ডিভিকে 4 ভাগে ভাগ করতে হয় এবং একাধিক সারি এমনকি বহু উপাদান দিয়ে সেগুলি ব্যবহার করা হয় gidতবে সাহায্য করবে।

— weBBer

67

& > * + *একটি flex-gap(একক লাইনের জন্য) অনুকরণ করতে আপনি নির্বাচক হিসাবে ব্যবহার করতে পারেন :

#box { display: flex; width: 230px; outline: 1px solid blue; }
.item { background: gray; width: 50px; height: 100px; }

/* ----- Flexbox gap: ----- */

#box > * + * {
  margin-left: 10px;
}

<div id='box'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
</div>

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

আপনার যদি ফ্লেক্স মোড়কে সহায়তা করার প্রয়োজন হয় তবে আপনি একটি মোড়কের উপাদানটি ব্যবহার করতে পারেন:

.flex { display: flex; flex-wrap: wrap;  }
.box { background: gray; height: 100px; min-width: 100px; flex: auto; }
.flex-wrapper {outline: 1px solid red; }

/* ----- Flex gap 10px: ----- */

.flex > * {
  margin: 5px;
}
.flex {
  margin: -5px;
}
.flex-wrapper {
  width: 400px; /* optional */
  overflow: hidden; /* optional */
}

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
    <div class='box'></div>
  </div>
</div>

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

— অ্যাসিঙ্ক করুন
সূত্র

3

পরিষ্কার সমাধান। যে কোনও সংখ্যক নমনীয় শিশু উপাদানগুলির জন্য কাজ করে।

— কনরাড গাজ্জোস্কি

1

এটি আমি যা খুঁজছিলাম এবং আমার পক্ষে দুর্দান্ত কাজ করেছি

— Paul

তবে একটি বিষয় লক্ষণীয় হ'ল *অপারেটর সুনির্দিষ্টতা বৃদ্ধি করে না যতটা আপনি আশা করতে পারেন। সুতরাং আপনার বিদ্যমান সিএসএসের উপর নির্ভর করে আপনাকে .flex > *নির্বাচকটির নির্দিষ্টতা বাড়াতে হবে বা !importantসেই উপাদানটিতে মার্জিন প্রয়োগকারী অন্য নির্বাচক উপস্থিত থাকলে নিয়মে যুক্ত হতে পারে।

— পল ওডিয়ন

সেরা সমাধান 👍

— o01

26

আসুন বলুন যে আপনি যদি 10pxআইটেমগুলির মধ্যে স্থান নির্ধারণ করতে চান তবে আপনি কেবল .item {margin-right:10px;}সবার জন্য সেট করতে পারেন এবং শেষটিতে এটি পুনরায় সেট করতে পারেন.item:last-child {margin-right:0;}

প্রথমটি বাদ দিয়ে বা আইটেমগুলিতে বাম মার্জিন সেট করতে আপনি সাধারণ ভাইবাল ~বা পরবর্তী +ভাইবোন নির্বাচকও .item ~ .item {margin-left:10px;}ব্যবহার করতে পারেন.item:not(:last-child) {margin-right: 10px;}

ফ্লেক্সবক্সটি এত চালাক যে এটি স্বয়ংক্রিয়ভাবে পুনরায় গণন করে এবং সমানভাবে গ্রিড বিতরণ করে।

body {
  margin: 0;
}

.container {
  display: flex;
}

.item {
  flex: 1;
  background: gray;
  height: 50px;
}

.item:not(:last-child) {
  margin-right: 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

আপনি যদি ফ্লেক্স মোড়কে অনুমতি দিতে চান তবে নীচের উদাহরণটি দেখুন।

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
}

.item {
  flex: 0 0 calc(50% - 10px);
  background: gray;
  height: 50px;
  margin: 0 0 10px 10px;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

— স্টিকারসমূহ
সূত্র

6

আইটেমগুলি মোড়ানো থাকলে এটি কাজ করবে না, যেহেতু :last-childলাইন শেষে প্রতিটি শেষ শিশুকে প্রভাবিত করে না , তাই না?

— ফ্লিম

2

@ ফ্লিম আমি ফ্লেক্স র‌্যাপের সাথে কাজ করার জন্য একটি দৃষ্টিভঙ্গি যুক্ত করেছি, উপরের দ্বিতীয় অংশটি দেখুন।

— স্টিকাররা

আমার সেরা উত্তর ... সহজ, পরিষ্কার, দক্ষ! ফ্লেক্স মোড়কের সাথে নিখুঁতভাবে কাজ করেছেন, আপনাকে ধন্যবাদ

— ম্যাথিউ মার্সি

16

আমি এমন একটি সন্ধান পেয়েছি যা সাধারণ ভাইবোন নির্বাচকের উপর ভিত্তি করে তৈরি হয় ~এবং অসীম বাসা বেঁধে দেয়।

কার্যকারী উদাহরণের জন্য এই কোড পেনটি দেখুন

মূলত, কলামের ধারকগুলির ভিতরে, অন্য বাচ্চাটির আগে থাকা প্রতিটি শিশু একটি শীর্ষ মার্জিন পায়। তেমনিভাবে, প্রতিটি সারির ধারকের ভিতরে, অন্যের আগে থাকা প্রতিটি শিশু বাম মার্জিন পায়।

.box {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.box.columns {
  flex-direction: row;
}

.box.columns>.box~.box {
  margin-left: 5px;
}

.box.rows {
  flex-direction: column;
}

.box.rows>.box~.box {
  margin-top: 5px;
}

<div class="box columns">
  <div class="box" style="background-color: red;"></div>
  <div class="box rows">
    <div class="box rows">
      <div class="box" style="background-color: blue;"></div>
      <div class="box" style="background-color: orange;"></div>
      <div class="box columns">
        <div class="box" style="background-color: yellow;"></div>
        <div class="box" style="background-color: pink;"></div>
      </div>
    </div>
    <div class="box" style="background-color: green;"></div>
  </div>
</div>

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

— সাইমন এপসক্যাম্প
সূত্র

মার্জিনগুলি বিশ্বব্যাপী প্রয়োগ না হওয়ার কারণে এটি বিভিন্ন আকারের আইটেমগুলিতে ফল দেয়।

— স্টিভেন ওয়াচন

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

— rhysclay

14

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

http://jsfiddle.net/chris00/s52wmgtq/49/

এছাড়াও অন্তর্ভুক্ত রয়েছে সাফারি "-ওয়েবেকিট-ফ্লেক্স" সংস্করণ।

.outer1 {
    background-color: orange;
    padding: 10px;
}

.outer0 {
    background-color: green;
    overflow: hidden;
}

.container
{
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;    
    -webkit-flex-wrap: wrap;
    background-color: rgba(0, 0, 255, 0.5);
    margin-left: -10px;
    margin-top: -10px;
}

.item
{
    flex-grow: 1;
    -webkit-flex-grow: 1;
    background-color: rgba(255, 0, 0, 0.5);
    width: 100px;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
    text-align: center;
    color: white;
}

<div class="outer1">
    <div class="outer0">
        <div class="container">
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
            <div class="item">text</div>
        </div>
    </div>
</div>

— ক্রিস
সূত্র

2

এটি কি মূলত প্রশ্নে বর্ণিত উদাহরণের মতো নয়?

— ফোর্ড

10

# ক্রোমডেভসমিট অনুসারে ফ্লেক্সবক্সের জন্য gapসম্পত্তি প্রয়োগ রয়েছে , যদিও এই সময়ে (14 নভেম্বর 2019) এটি কেবল ফায়ারফক্সে সমর্থিত তবে শীঘ্রই ক্রোমে প্রয়োগ করা উচিত:

সরাসরি নমুনা

আমার উত্তরটি ক্রোমে যাওয়ার পরে আমি আপডেট করব।

— এলিয়া কোহেন
সূত্র

9

আমি এটি মোড়ানো এবং নির্দিষ্ট প্রস্থের কলামগুলির জন্য ব্যবহার করেছি। এখানে চাবিcalc()

এসসিএসএস নমুনা

$gap: 10px;

dl {
  display: flex;
  flex-wrap: wrap;
  padding: $gap/2;

  dt, dd {
    margin: $gap/2;}

  dt { // full width, acts as header
    flex: 0 0 calc(100% - #{$gap});}

  dd { // default grid: four columns 
    flex: 0 0 calc(25% - #{$gap});}

  .half { // hall width columns
    flex: 0 0 calc(50% - #{$gap});}

}

সম্পূর্ণ কোডেন নমুনা

— Veiko Jääger
সূত্র

2

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

— হারম্যান

2

আইলে ১১ এ "ফ্লেক্স" আইটেমের ভিতরে ফ্লেক্সবক্স ক্যালক () সমর্থন করে না

— অ্যাডাম Šipický

সর্বদা ব্যবহার করা যায় না। সরাসরি বাচ্চাদের জন্যও যদি সীমান্তের দরকার হয় তা কল্পনা করুন

— অ্যান্ডিস

9

একটি আনমন ধারক সঙ্গে -x (ঋণাত্মক) মার্জিন এবং আনমন আইটেম সঙ্গে এক্স (ধনাত্মক) মার্জিন বা প্যাডিং প্রয়োগ পছন্দসই চাক্ষুষ ফলাফলের উভয় নেতৃত্ব: ফ্লেক্স আইটেম একটি আছে 2x নির্দিষ্ট ফাঁক শুধুমাত্র মধ্যে একে অপরের।

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

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

.flex-container { 
  margin: 0 -5px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-item {
  margin: 0 5px; // Alternatively: padding: 0 5px;
  flex: 1 0 auto;
}

— টিম
সূত্র

3

দুঃখিত, আমি এটি পেলাম না। আপনার উত্তরটি নতুন কোনটি প্রবর্তন করে যা প্রশ্নে সরাসরি বলা হয় না?

— ব্যবহারকারী

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

— টিম

এখানে এই কোডটি দেখানোর একটি কোডেপেন উদাহরণ রয়েছে। codepen.io/dalgard/pen/Dbnus

— পেডালপেট

8

অবশেষে তারা gapসম্পত্তিটি ফ্লেক্সবক্সে যুক্ত করবে । ততক্ষণ আপনি এর পরিবর্তে সিএসএস গ্রিড ব্যবহার করতে পারবেন যার মধ্যে ইতিমধ্যে gapসম্পত্তি রয়েছে এবং কেবল একটি সারি রয়েছে। মার্জিনের সাথে ডিল করার চেয়ে ভাল Nic

— অলি উইলিয়ামস
সূত্র

এখানে আলোচনা: github.com/w3c/csswg-drafts/issues/1696 - তারা সিএসএস গ্রিড, ফ্লেক্সবক্স এবং সিএসএস কলামগুলিতে নামকরণও প্রবাহিত করবে।

— ফ্রাঙ্ক ল্যামার

5

আমার সমাধানে ফ্লেক্সবক্স ব্যবহার করে আমি justify-contentপ্যারেন্ট উপাদান (ধারক) এর জন্য সম্পত্তিটি ব্যবহার করেছি এবং আমি flex-basisআইটেমগুলির সম্পত্তির অভ্যন্তরে মার্জিন নির্দিষ্ট করেছি । নীচে কোড স্নিপেট চেক করুন:

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  margin-bottom: 10px;
}

.item {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #999;
}

.item-1-4 {
  flex-basis: calc(25% - 10px);
}

.item-1-3 {
  flex-basis: calc(33.33333% - 10px);
}

.item-1-2 {
  flex-basis: calc(50% - 10px);
}

<div class="container">
  <div class="item item-1-4">1</div>
  <div class="item item-1-4">2</div>
  <div class="item item-1-4">3</div>
  <div class="item item-1-4">4</div>
</div>
<div class="container">
  <div class="item item-1-3">1</div>
  <div class="item item-1-3">2</div>
  <div class="item item-1-3">3</div>
</div>
<div class="container">
  <div class="item item-1-2">1</div>
  <div class="item item-1-2">2</div>
</div>

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

— iClusterDev
সূত্র

5

ফ্লেক্সবক্সের সাহায্যে, গিটার তৈরি করা একটি ব্যথা হয়, বিশেষত যখন মোড়ক জড়িত থাকে।

আপনাকে নেতিবাচক মার্জিনগুলি ব্যবহার করতে হবে ( প্রশ্নটিতে দেখানো হয়েছে ):

#box {
  display: flex;
  width: 100px;
  margin: 0 -5px;
}

... বা এইচটিএমএলকে পরিবর্তন করুন ( অন্য উত্তরে দেখানো হয়েছে ):

<div class='flex-wrapper'>
  <div class='flex'>
    <div class='box'></div>
    <div class='box'></div>
            ...
  </div>
</div>

... অথবা অন্য কিছু.

যাই হোক না কেন, এটিকে কাজ করতে আপনার একটি কুৎসিত হ্যাক দরকার কারণ ফ্লেক্সবক্স কোনও flex-gapবৈশিষ্ট্য সরবরাহ করে না "( কমপক্ষে আপাতত )।

গ্যটারগুলির বিষয়টি সিএসএস গ্রিড লেআউট সহ সহজ এবং সহজ।

গ্রিড স্পেস এমন বৈশিষ্ট্য সরবরাহ করে যা গ্রিড আইটেমগুলির মধ্যে স্থান তৈরি করে, যখন আইটেম এবং ধারকগুলির মধ্যে স্থান উপেক্ষা করে। এই বৈশিষ্ট্যগুলি হ'ল:

grid-column-gap
grid-row-gap
grid-gap (উপরের দুটি বৈশিষ্ট্যের জন্য সংক্ষিপ্ত বিবরণ)

সম্প্রতি, স্পেসটি সিএসএস বক্স অ্যালাইনমেন্ট মডিউলটির সাথে সামঞ্জস্য করতে আপডেট করা হয়েছে , যা সমস্ত বক্স মডেল জুড়ে ব্যবহারের জন্য সারিবদ্ধ বৈশিষ্ট্যের একটি সেট সরবরাহ করে। সুতরাং এখন বৈশিষ্ট্যগুলি:

column-gap
row-gap
gap (সাধারণভাবে সংক্ষেপে)

তবে, সমস্ত গ্রিড-সমর্থনকারী ব্রাউজারগুলি নতুন বৈশিষ্ট্যগুলিকে সমর্থন করে না, তাই আমি নীচের ডেমোতে মূল সংস্করণগুলি ব্যবহার করব।

এছাড়াও, যদি আইটেম এবং ধারকটির মধ্যে ব্যবধান প্রয়োজন হয় তবে ধারকটি paddingঠিক কাজ করে (নীচের ডেমোতে তৃতীয় উদাহরণ দেখুন)।

অনুমান থেকে:

10.1। Gutters: row-gap, column-gap, এবং gap বৈশিষ্ট্য

row-gapএবং column-gapবৈশিষ্ট্যাবলী (এবং তাদের gapসাধারণভাবে সংক্ষেপে), যখন একটি গ্রিড ধারক উল্লিখিত, গ্রিড সারি এবং গ্রিড কলাম মধ্যে গাটার নির্ধারণ করুন। তাদের সিনট্যাক্সটি সিএসএস বক্স অ্যালাইনমেন্ট 3 §8 বক্সগুলির মধ্যে গ্যাপগুলিতে সংজ্ঞায়িত করা হয়েছে ।

এই বৈশিষ্ট্যগুলির প্রভাব যেমন প্রভাবিত গ্রিড লাইনগুলি বেধ অর্জন করেছে: দুটি গ্রিড লাইনের মধ্যে গ্রিড ট্র্যাক হ'ল তাদের প্রতিনিধিত্বকারী নালীগুলির মধ্যে স্থান।

.box {
  display: inline-grid;
  grid-auto-rows: 50px;
  grid-template-columns: repeat(4, 50px);
  border: 1px solid black;
}

.one {
  grid-column-gap: 5px;
}

.two {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.three {
  grid-gap: 10px;
  padding: 10px;
}

.item {
  background: lightgray;
}

<div class='box one'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box two'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

<hr>

<div class='box three'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

অধিক তথ্য:

— মাইকেল বেঞ্জামিন
সূত্র

5

সিএসএস `gap` সম্পত্তি:

মাল্টি-কলাম, ফ্লেক্সবক্স এবং গ্রিড লেআউটগুলির জন্য একটি নতুন gapসিএসএস সম্পত্তি রয়েছে যা এখন কয়েকটি ব্রাউজারে কাজ করে! (দেখুন আমি লিঙ্ক 1 ব্যবহার করতে পারি ; লিঙ্ক 2 )

#box {
  display: flex;
  width: 100px;
  background-color: red;
  gap: 10px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

লেখার ক্ষেত্রে, এটি কেবল ফায়ারফক্সে দুঃখজনকভাবে কাজ করে। আপনি যদি "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করে" সক্ষম করেন তবে এটি বর্তমানে Chrome এ কাজ করে about:flags।

— Flimm
সূত্র

4

এটি কেন এমন করবেন না:

.item + .item {
    margin-left: 5px;
}

এটি প্রথম একটিকে বাদ দিয়ে সমস্ত উপাদান দেওয়ার জন্য সংলগ্ন ভাইবোন নির্বাচনকারী ব্যবহার করে । ফ্লেক্সবক্সকে ধন্যবাদ, এটি সমানভাবে বিস্তৃত উপাদানগুলিতেও ফল দেয়। এটি উল্লম্বভাবে অবস্থিত উপাদানগুলির সাথেও করা যেতে পারে এবং অবশ্যই।.itemmargin-leftmargin-top

— tillsanders
সূত্র

8

এটি যতক্ষণ কাজ করবে ফ্লেক্স আইটেমগুলি সর্বদা একক সারিতে থাকে work যদি মোড়ানোর অনুমতি দেওয়া হয় তবে সম্ভবত এটি যথেষ্ট হবে না।

— নিক এফ

4

এখানে আমার সমাধানটি দেওয়া হয়েছে, এর জন্য শিশু উপাদানগুলিতে কোনও ক্লাস স্থাপনের প্রয়োজন নেই:

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

.flex-inline-row.flex-spacing-4px > :not(:last-child) {
    margin-right: 4px;
}

ব্যবহার:

<div class="flex-inline-row flex-spacing-4px">
  <span>Testing</span>
  <span>123</span>
</div>

উপরে উল্লিখিত ইনলাইন উদাহরণ ছাড়াও সাধারণ ফ্লেক্স সারি এবং কলামগুলির জন্য একই কৌশলটি ব্যবহার করা যেতে পারে এবং 4px ব্যতীত অন্য ফাঁক দেওয়ার জন্য ক্লাস সহ প্রসারিত করা যেতে পারে।

— MK10
সূত্র

4

এই জাতীয় ক্ষেত্রে আমি প্রায়শই + অপারেটর ব্যবহার করি

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
.item + .item {
    margin-left: 5px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

— wutzebaer
সূত্র

3

আমি এটির সবচেয়ে সহজ উপায়টি শতাংশের সাথে খুঁজে পেয়েছি এবং মার্জিনটিকে আপনার প্রস্থকে টালতে দিচ্ছি

এর অর্থ এই যে আপনি যদি আপনার উদাহরণ ব্যবহার করে থাকেন তবে আপনি এরকম কিছু দিয়ে শেষ করেন

#box {
   display: flex;
}

.item {
   flex: 1 1 23%;
   margin: 0 1%;
}

এর অর্থ হল আপনার মানগুলি প্রস্থের ভিত্তিতে রয়েছে যদিও এটি সবার পক্ষে ভাল নাও হতে পারে।

— lukefrake
সূত্র

ঠিক এই সমাধানটি পেরিয়ে এসেছি, এটি খুব সুন্দর। আমার ক্ষেত্রে, কমপক্ষে (যারা এটি আকর্ষণীয় বলে মনে করতে পারে তাদের জন্য একটি কলম: codepen.io/rishatmuhametshin/pen/XXjpaV ) কাজ করে।

— রিশাত

2

নমনীয় বাক্স ব্যবহার করে স্পেসিংয়ের সাথে কার্ড ইউআই উপাদানগুলির একটি গ্রিড এখানে রয়েছে:

আমি ইফফী ফলাফল সহ প্যাডিং এবং মার্জিনগুলি ম্যানিপুলেট করে কার্ডগুলিতে ম্যানুয়ালি ফাঁক করে হতাশ হয়ে পড়েছিলাম। সুতরাং এখানে সিএসএস বৈশিষ্ট্যগুলির সংমিশ্রণগুলি আমি খুব কার্যকর পেয়েছি:

.card-container {
  width: 100%;
  height: 900px;
  overflow-y: scroll;
  max-width: inherit;
  background-color: #ffffff;
  
  /*Here's the relevant flexbox stuff*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap; 
}

/*Supplementary styles for .card element*/
.card {
  width: 120px;
  height: 120px;
  background-color: #ffeb3b;
  border-radius: 3px;
  margin: 20px 10px 20px 10px;
}

<section class="card-container">
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
        <div class="card">

        </div>
      </section>

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

আশা করি এটি ভবিষ্যতে, ভবিষ্যতে এবং ভবিষ্যতে লোকদের সহায়তা করবে।

— buildpax
সূত্র

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

— বিল্ডপ্যাক্স

2

কলামিফাই - এন কলামগুলির জন্য একক শ্রেণি

ফ্লেক্সবক্স এবং এসসিএসএস

.columnify {
  display: flex;

  > * {
    flex: 1;

    &:not(:first-child) {
      margin-left: 2rem;
    }
  }
}

ফ্লেক্সবক্স এবং সিএসএস

.columnify {
  display: flex;
}

.columnify > * {
  flex: 1;
}

.columnify > *:not(:first-child) {
  margin-left: 2rem;
}

<div class="columnify">
  <div style="display: inline-block; height: 20px; background-color: blue;"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
  <div style="display: inline-block; height: 20px; background-color: blue"></div>
</div>

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

এটি জেএসফিডেলে খেলুন ।

— zurfyx
সূত্র

1

#box {
  display: flex;
  width: 100px;
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
}
/* u mean utility */
.u-gap-10 > *:not(:last-child) {
  margin-right: 10px;
}

<div id='box' class="u-gap-10">
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

— আমো উ
সূত্র

1

.item + .itemদ্বিতীয় থেকে ম্যাচ করার জন্য কেবল নির্বাচক ব্যবহার করুন.item

#box {
  display: inline-flex;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 10px;
  height: 50px;
}

#box .item + .item {
  margin-left: 10px;
}

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

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

— অ্যান্ড্রু লুকা
সূত্র

1

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

মোড়ানো সহ আপনি 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;
  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>

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

— সালমান আ
সূত্র

1

এটি করার জন্য একটি দুর্দান্ত, পরিপাটি, সিএসএসের একমাত্র উপায় আছে (এটি "আরও ভাল" হিসাবে বিবেচনা করতে পারে)।

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

এই সমাধানটি ওপি-র প্রশ্নকে নেতিবাচক মার্জিনের বিকল্পের সাথে সম্বোধন করে এবং দারিউসকে উদ্ভূত সমস্যার সমাধান করে।

মন্তব্য:

এই উদাহরণটি কেবল একটি 3-কলাম লেআউট প্রদর্শন করে
এটি calc()ব্রাউজারটিকে যেভাবে চায় গণিত করতে দেয় - 100%/3 (যদিও 33.3333% ঠিক তেমনভাবে কাজ করা উচিত) , এবং (1em/3)*2 (যদিও .66 এমও ভালভাবে কাজ করা উচিত) ।
::afterকলামের চেয়ে কম উপাদান থাকলে এটি সর্বশেষ সারিতে প্যাড করতে ব্যবহার করে

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-container:after {
  content: "";
}
.flex-container > div,
.flex-container:after {
  box-sizing: border-box;
  width: calc((100%/3) - ((1em/3)*2));
}
.flex-container > :nth-child(n + 4) {
  margin-top: 1em;
}

/* the following is just to visualize the items */
.flex-container > div,
.flex-container:after {
  font-size: 2em;
}
.flex-container {
  margin-bottom:4em;
}
.flex-container > div {
  text-align: center;
  background-color: #aaa;
  padding: 1em;
}
.flex-container:after {
  border: 1px dashed red;
}

<h2>Example 1 (2 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
</div>

<h2>Example 2 (3 elements)</h2>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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

এছাড়াও https://codepen.io/anon/pen/rqWagE এ

— aequalsb
সূত্র

1

আপনি নতুন সম্পত্তি ব্যবহার করতে পারে gap। আমি ব্যাখ্যা আমি এই পাওয়া পেস্ট কপি নিবন্ধ আরও তথ্যের পাশাপাশি,

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

দুর্ভাগ্যজনকভাবে এখনই, কেবল ফায়ারফক্স ফ্লেক্স লেআউটে ফাঁক সমর্থন করে।

@use postcss-preset-env {
  stage: 0;
  browsers: last 2 versions
}

section {
  width: 30vw;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  
  &[flex] {
    display: flex;
    flex-wrap: wrap;
  }
  
  margin-bottom: 3rem;
}

.tag {
  color: white;
  background: hsl(265 100% 47%);
  padding: .5rem 1rem;
  border-radius: 1rem;
}

button {
  display: inline-flex;
  place-items: center;
  gap: .5rem;
  background: hsl(265 100% 47%);
  border: 1px solid hsl(265 100% 67%);
  color: white;
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-size: 1.25rem;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<section>
  <h1>Grid</h1> 
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>
<br>
<section flex>
  <h1>Flex</h1>
  <div class="tag">Awesome</div>
  <div class="tag">Coo</div>
  <div class="tag">Rad</div>
  <div class="tag">Math</div>
</section>

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

— আন্দ্রেস পল
সূত্র

gapইতিমধ্যে এখানে stackoverflow.com/a/58041749/2756409 উত্তরে প্রস্তাব দেওয়া হয়েছিল , এটি সিএসএস নয়।

— টাইলারহান

0

এটি প্রতিটি ক্ষেত্রে কাজ করবে না তবে আপনার যদি নমনীয় শিশু প্রস্থগুলি (%) থাকে এবং প্রতি সারিতে আইটেমের সংখ্যা জানতে পারেন তবে আপনি খুব পরিষ্কার করে প্রয়োজনীয় উপাদানগুলির মার্জিনটি নির্দিষ্ট করে নির্দিষ্ট করে নির্দিষ্ট করে দিতে পারেন nth-child নির্বাচক / গুলি ।

এটি "আরও ভাল" বলতে কী বোঝায় তার উপর এটি নির্ভরশীল। এই উপায়ে শিশু উপাদান বা নেতিবাচক উপাদানগুলির জন্য অতিরিক্ত মোড়কের মার্কআপের প্রয়োজন নেই - তবে things জিনিসগুলির উভয়েরই জায়গা রয়েছে।

section {
  display: block
  width: 100vw;
}
.container {
  align-content: flex-start;
  align-items: stretch;
  background-color: #ccc;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  width: 100%;
}

.child-item {
  background-color: #c00;
  margin-bottom: 2%;
  min-height: 5em;
  width: 32%;
}

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

<html>
  <body>
      <div class="container">
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
        <div class="child-item"></div>
      </div>
   </body>
</html>

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

— jnmrobinson
সূত্র

প্রতিক্রিয়াশীল নয়। শুধুমাত্র নির্দিষ্ট প্রস্থের পিতামাতার জন্য কাজ করে।

— সবুজ

1

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

— jnmrobinson

0

আমি একই ইস্যুটি এর আগে এসেছি, তারপরে এই উত্তরটির জন্য হোঁচট খেয়েছি। আশা করি এটি ভবিষ্যতের রেফারেন্সের জন্য অন্যকে সহায়তা করবে।

দীর্ঘ উত্তর সংক্ষিপ্ত, আপনার সন্তানের ফ্লেক্স-আইটেমগুলিতে একটি সীমানা যুক্ত করুন। তারপরে আপনি যা পছন্দ করেন তার থেকে ফ্লেক্স-আইটেমগুলির মধ্যে মার্জিন নির্দিষ্ট করতে পারেন। স্নিপেটে, আমি উদাহরণের জন্য কালো ব্যবহার করি, আপনি চাইলে 'স্বচ্ছ' ব্যবহার করতে পারেন।

#box {
  display: flex;
  width: 100px;
  /* margin: 0 -5px; *remove this*/
}
.item {
  background: gray;
  width: 50px;
  height: 50px;
  /* margin: 0 5px; *remove this*/
  border: 1px solid black; /* add this */
}
.item.special{ margin: 0 10px; }

<div id='box'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item special'></div>
</div>

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

— Tunasing
সূত্র

0

বক্স ধারকের নেতিবাচক মার্জিন ট্রিকটি দুর্দান্ত কাজ করে। এখানে অর্ডার, মোড়ক এবং কী না দিয়ে দুর্দান্ত কাজ করার আরেকটি উদাহরণ।

.container {
   border: 1px solid green;
   width: 200px;
   display: inline-block;
}

#box {
  display: flex;
  flex-wrap: wrap-reverse;
  margin: -10px;
  border: 1px solid red;
}
.item {
  flex: 1 1 auto;
  order: 1;
  background: gray;
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 1px solid blue;
}
.first {
  order: 0;
}

<div class=container>
<div id='box'>
  <div class='item'>1</div>
  <div class='item'>2</div>
  <div class='item first'>3*</div>
  <div class='item'>4</div>
  <div class='item'>5</div>
</div>
</div>

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

— cghislai
সূত্র

ফ্লেক্সবক্স আইটেমগুলির মধ্যে দূরত্ব নির্ধারণের আরও ভাল উপায়

একাধিক সারি সমর্থন সহ ফ্লেক্সবক্স এবং সিএসএস ক্যালক

পুরানো উত্তর

সিএসএস gap সম্পত্তি:

কলামিফাই - এন কলামগুলির জন্য একক শ্রেণি

ফ্লেক্সবক্স এবং এসসিএসএস

ফ্লেক্সবক্স এবং সিএসএস

সিএসএস `gap` সম্পত্তি: