css - Flexbox আইটেম মধ্যে দূরত্ব সেট করার ভাল উপায়




css3 (20)

Columnify - এন কলামের জন্য একটি একক বর্গ

Flexbox এবং SCSS

.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>

JSFiddle এটি দিয়ে খেলুন।

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

Example

#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>


flexbox এবং CSS calc ()

হ্যালো, নীচের ফ্লেক্সবক্স সমর্থনকারী সকল ব্রাউজারের জন্য আমার কাজ সমাধান। কোন নেতিবাচক মার্জিন, কোন হ্যাক, কোন workarounds, বিশুদ্ধ CSS।

ফেইড ডেমো

   
.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-bottom: 10px;
  width: calc(1/3*100% - (1 - 1/3)*10px);
}
<div class="flexbox">
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>


অবশেষে তারা flexbox করতে gap সম্পত্তি যোগ করা হবে। তারপরে আপনি সিএসএস গ্রিড ব্যবহার করতে পারেন যার পরিবর্তে ইতিমধ্যে gap সম্পত্তির রয়েছে এবং শুধুমাত্র একটি সারি আছে। মার্জিন সঙ্গে ডিল চেয়ে নিকৃষ্ট।


আপনি একটি 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>

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

.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>


আমার সমাধানটিতে ফ্লেক্সবক্স ব্যবহার করে আমি মূল উপাদান (কন্টেইনার) এর জন্য 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>


আমি আবৃত এবং নির্দিষ্ট প্রস্থ কলাম জন্য এই ব্যবহার করেছেন। এখানে কী calc()

SCSS নমুনা

$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});}

}

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


আমি একটি সমাধান খুঁজে পেয়েছি যা সিএসএসের preceded by সিএসএসের উপর ভিত্তি করে তৈরি হয়েছে, এবং অবিরাম নেস্টিংয়ের অনুমতি দেয়।

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

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

.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 {
  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>


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

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

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

.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 ব্যতীত অন্য ব্যবধানের জন্য ক্লাসগুলির সাথে বর্ধিত করা যেতে পারে।


এটি আমাদের ক্ষেত্রে একাধিক সারি বা উপাদানগুলির সংখ্যা থাকলেও সমস্ত ক্ষেত্রে কাজ করবে।

আমরা display: grid; ব্যবহার 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>

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

পুরানো উত্তর

যদি আপনি চান যে আপনি সর্বদা সিএসএস ভাইবোন সমন্বয় ব্যবহার করতে পারেন:

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

উপরোক্ত কোড কৌতুক করতে হবে। এই পদ্ধতিতে margin: 0 -5px; দেওয়ার কোন দরকার নেই margin: 0 -5px; #box রেপারে।

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

#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>


এটি করার জন্য একটি চমৎকার, পরিচ্ছন্ন, সিএসএস-একমাত্র উপায় রয়েছে (যেটি কেউ "ভাল" বিবেচনা করতে পারে)।

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

এই সমাধানটি OP এর প্রশ্নটিকে নেতিবাচক মার্জিনের বিকল্পের সাথে সম্পর্কিত করে এবং ডারিয়াসেজকে সমস্যাটির সমাধান করে।

নোট:

  • এই উদাহরণটি শুধুমাত্র একটি 3-কলাম বিন্যাস প্রদর্শন করে
  • ব্রাউজারটিকে গণিতের মতো ভাবে করতে গণনা করার জন্য এটি calc() ব্যবহার করে - 100%/3 (যদিও 33.3333% ঠিক যেমন কাজ করবে) , এবং (1em/3)*2 (যদিও .66em ভাল কাজ করতে হবে)
  • এটি ব্যবহার করে ::after কলামের চেয়ে কম উপাদান থাকলে শেষ সারির প্যাডের ::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


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

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

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

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

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

.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>


শুধু .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>


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

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

এই উদাহরণে, স্থির ফাঁক সংরক্ষণ করতে flex ফ্লাইট আইটেমগুলি গতিশীলভাবে স্কেল করা হয়:

.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;
}

আমি একটি হ্যাক খুঁজে পেয়েছি কারণ আমি সত্যিই এই আমার প্রয়োজন।

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

.container::after, /* this makes sure odd element goes left and not space between */
.item {
  content:"";
  width: calc(33.3333% - 20px);
  margin-bottom: 40px;
}

/* extra styling - not important */
.item {
  height: 100px;
  background: #787878;
}
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

এখানে চমৎকার ফ্লেক্স বৃদ্ধি বিভাগের সাথে একটি পোস্ট গ্রিড। আমি মনে করি তুমি এটা পছন্দ করবে। Codepen দেখুন


আমি here আমার flexbox পদ্ধতি পোস্ট :

আমি প্রত্যাখ্যাত একটি ধারণা বাইরের কলাম থেকে এই ধরনের কিছু দিয়ে প্যাডিং সরাতে ছিল:

div:nth-child(#{$col-number}n+1) { padding-left: 0; }
div:nth-child(#{$col-number}n+#{$col-number}) { padding-left: 0; }

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

https://jsfiddle.net/x3jvfrg1/


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

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

#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>


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

এটি "ভাল" দ্বারা আপনি যা বোঝাতে চান তার উপর মূলত নির্ভর করে। এই উপায়ে শিশু উপাদান বা নেতিবাচক উপাদানের জন্য অতিরিক্ত রপার মার্কআপ প্রয়োজন হয় না - তবে উভয়ই তাদের অবস্থান রাখে।

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>


বক্স ধারক নেভিগেশন নেতিবাচক মার্জিন কৌতুক ঠিক মহান কাজ করে। এখানে আরেকটি উদাহরণ ক্রম সঙ্গে মহান কাজ, মোড়ানো এবং কি না।

.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>





flexbox