260

আমি 8 টি আইটেম প্রদর্শন করতে একটি ফ্লেক্স বাক্স ব্যবহার করছি যা আমার পৃষ্ঠার সাথে পরিবর্তনশীল আকার পরিবর্তন করবে। আমি কীভাবে এটিকে দুটি সারিতে আইটেমগুলি বিভক্ত করতে বাধ্য করব? (প্রতি সারিতে 4)?

এখানে একটি প্রাসঙ্গিক স্নিপ দেওয়া হল:

(অথবা আপনি যদি জসফিডেল পছন্দ করেন - http://jsfiddle.net/vivmaha/oq6prk1p/2/ )

.parent-wrapper {
  height: 100%;
  width: 100%;
  border: 1px solid black;
}
.parent {
  display: flex;
  font-size: 0;
  flex-wrap: wrap;
  margin: -10px 0 0 -10px;
}
.child {
  display: inline-block;
  background: blue;
  margin: 10px 0 0 10px;
  flex-grow: 1;
  height: 100px;
}

<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>

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

html css flexbox

— বিবেক মহারাজ
সূত্র

16

[আপডেট] এই প্রশ্নটি একটি দরিদ্র প্রতিক্রিয়াহীন ডিজাইনের ভিত্তিতে ছিল। যদি আপনি নীচের উত্তরগুলির একটির ব্যবহার করে নিজেকে খুঁজে পান তবে সাবধান হন। একটি ভাল ডিজাইনে, আপনার আরও বৃহত্তর স্ক্রিনে এবং আরও কম স্ক্রিনে আইটেম থাকতে পারে। সমস্ত স্ক্রীন আকারের জন্য 4 টি আইটেম জোর করা কেবলমাত্র পর্দার প্রশস্ততার সংক্ষিপ্ত পরিসীমাটিতে আবেদনকারী দেখাবে।

— বিবেক মহারাজ 16

380

আপনি flex-wrap: wrapপাত্রে পেয়েছেন । এটি ভাল, কারণ এটি ডিফল্ট মানটিকে ওভাররাইড করে যা nowrap( উত্স )। আইটেমগুলি কোনও কোনও ক্ষেত্রে গ্রিড গঠনে মোড় না দেওয়ার কারণ এটি ।

এই ক্ষেত্রে, মূল সমস্যাটি হ'ল flex-grow: 1ফ্লেক্স আইটেমগুলিতে।

flex-growসম্পত্তি আসলে আকার আনমন আইটেম না। এর কাজটি পাত্রে ( উত্স ) ফাঁকা স্থান বিতরণ করা । সুতরাং পর্দার আকার যত ছোট হোক না কেন, প্রতিটি আইটেম লাইনের মুক্ত জায়গার একটি আনুপাতিক অংশ গ্রহণ করবে।

আরও নির্দিষ্টভাবে, আপনার ধারকটিতে আটটি ফ্লেক্স আইটেম রয়েছে। এর সাথে flex-grow: 1প্রত্যেকে লাইনের ফাঁকা জায়গার 1/8 অংশ গ্রহণ করে। যেহেতু আপনার আইটেমগুলিতে কোনও সামগ্রী নেই, সেগুলি শূন্য প্রস্থে সঙ্কুচিত হতে পারে এবং কখনই মোড়ানো যায় না।

সমাধানটি হ'ল আইটেমগুলির প্রস্থ নির্ধারণ করা। এটা চেষ্টা কর:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; /* explanation below */
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

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

সঙ্গে flex-grow: 1সংজ্ঞায়িত flexসাধারণভাবে সংক্ষেপে, সেখানে কোন প্রয়োজন flex-basis25% হতে, যা আসলে মার্জিন কারণে সারি প্রতি তিন আইটেম স্থাপিত হবে।

যেহেতু flex-growসারিতে খালি জায়গাটি গ্রাস করবে, তাই flex-basisকেবল একটি মোড়ানো কার্যকর করার জন্য যথেষ্ট পরিমাণে বড় হওয়া দরকার। এই ক্ষেত্রে, এর সাথে flex-basis: 21%, মার্জিনগুলির জন্য প্রচুর স্থান রয়েছে, তবে পঞ্চম আইটেমের জন্য পর্যাপ্ত স্থান কখনও নেই।

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

1

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

— জ্যাকসন 21

1

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

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

2

"আপনি যদি খুব বড় মার্জিন রাখেন তবে লেআউটটি ভেঙে যেতে পারে" এটি এমন একটি দৃশ্যের উদাহরণ যা আমি এড়াতে চাই। আমি ব্যবহারিকতার বিষয়ে চিন্তা করি না; পরিপূর্ণতার জন্য আমার উপভোগ করুন। আরও সঠিক হওয়ার কোনও উপায় আছে কি?

— জ্যাকসন

27

আপনি ব্যবহার করতে পারেনflex: 1 0 calc(25% - 10px);

— মার্কজি

2

দুর্দান্ত উত্তর! margin: 2%;ছোট ডিভাইস / রেজোলিউশনে বাক্সগুলিকে নতুন লাইনে ঝাঁপানো থেকে আটকাতে আমি একটি নির্দিষ্ট পিক্সেল সংখ্যার পরিবর্তে একটি ছোট উন্নতি ব্যবহার করি । সাধারণ সূত্রটি (100 - (4 * box-width-percent)) / 8বিভিন্ন বাক্সের প্রস্থের জন্য%

— থোমাস্পস্ক

104

.childউপাদানগুলিতে একটি প্রস্থ যুক্ত করুন । আমি ব্যক্তিগতভাবে শতাংশের শতাংশ ব্যবহার margin-leftকরতে চাই যদি আপনি এটি সারিতে প্রতি 4 টি সর্বদা রাখতে চান।

ডেমো

.child {
    display: inline-block;
    background: blue;
    margin: 10px 0 0 2%;
    flex-grow: 1;
    height: 100px;
    width: calc(100% * (1/4) - 10px - 1px);
}

— dowomenfart
সূত্র

ভাল ধারণা. আমি এই ধারণাটি ছোটখাটো সম্পাদনা দিয়ে ব্যবহার করেছি। jsfiddle.net/vivmaha/oq6prk1p/6

— বিবেক মহারাজ

1

আহ। এটি আসলে আমার সমস্যার সমাধান করে না। উদাহরণ হিসাবে এখানে দেখুন: jsfiddle.net/vivmaha/oq6prk1p/7 । আমার প্রান্তিকের জন্য শতাংশ ব্যবহারের স্বাধীনতা আমার নেই। এগুলি অবশ্যই একটি নির্দিষ্ট প্রস্থ হতে হবে। এর অর্থ হ'ল যে ম্যাজিক 23% আমরা বেছে নিয়েছি তা কার্যকর হবে না কারণ এটি নির্দিষ্ট মার্জিনটিকে বিবেচনায় নেয় না।

— বিবেক মহারাজ 21

3

হ্যাঁ, গণনা এটি সমাধান করে! 'ক্যালক (100% * (1/4) - 10px - 1px)'। Jsfiddle.net/vivmaha/oq6prk1p/9

— বিবেক মহারাজ

24

তাহলে এর মধ্যে ফ্লেক্সের ব্যবহার কী?

— দ্বিগুণ

প্রতিক্রিয়াশীল নকশা সম্পর্কে কি? আমরা সন্তানের উপর একটি নির্দিষ্ট প্রস্থ স্থাপন করতে চাই না

— মোমবাতি

40

এখানে আরও একটি উত্সাহ দেওয়া হয়।

আপনি এটিও এভাবে সম্পাদন করতে পারেন:

.parent{
  display: flex;
  flex-wrap: wrap;
}

.child{
  width: 25%;
  box-sizing: border-box;
}

নমুনা: https://codepen.io/capynet/pen/WOPBBm

এবং আরও সম্পূর্ণ নমুনা: https://codepen.io/capynet/pen/JyYaba

— Capy
সূত্র

1

আমার 4 বাচ্চা কম হলে কী হবে? আমি সেই ফাঁকা ফাঁকা জায়গাটি অপছন্দ করি, শিশুটি প্রতিক্রিয়াশীল নয় ...

— মোমবাতি

মুদ্দাসির আব্বাসের অন্য উত্তরটি কেবল ফ্লেক্স সেটিংস ব্যবহার করে, তাই আমি মনে করি এটি একটি ক্লিনার সমাধান।

— অ্যান্ড্রু কোস্টার

17

আমি এটি নেগেটিভ মার্জিন এবং জলের জন্য ক্যালক ব্যবহার করে এটি করব:

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

.child {
  width: calc(25% - 10px);
  margin-left: 10px;
  margin-top: 10px;
}

ডেমো: https://jsfiddle.net/9j2rvom4/

বিকল্প সিএসএস গ্রিড পদ্ধতি:

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

ডেমো: https://jsfiddle.net/jc2utfs3/

— shanomurphy
সূত্র

14

<style type="text/css">
.parent{
    display: flex;
    flex-wrap: wrap;
}
.parent .child{
    flex: 1 1 25%;
}
</style>    
<div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>

আশা করি এটা সাহায্য করবে. আরও বিশদ জন্য আপনি এই লিঙ্কটি অনুসরণ করতে পারেন

— মুদ্দাসির আব্বাস
সূত্র

4

আমি বিশ্বাস করি যে এই উদাহরণটি আরও খালি এবং ততক্ষণে @ ডোমেনফার্টটি বোঝা সহজ ।

.child {
    display: inline-block;
    margin: 0 1em;
    flex-grow: 1;
    width: calc(25% - 2em);
}

সরাসরি মাংস কাটার সময় এটি একই প্রস্থের গণনা সম্পাদন করে। গণিতটি সহজতর এবং এর স্কেলিবিলিটি এবং মোবাইল-বন্ধুত্বের কারণে emএটি নতুন মান ।

— জোসেফ চ
সূত্র

3

এম সত্যই নতুন মান নয়। এটি পাছায় ব্যথা হতে পারে এবং ডিজাইনাররা ইএমের কথা মাথায় রেখে ডিজাইন করেন না।

— ড্যানি ভ্যান হলটেন

2

.parent-wrapper {
	height: 100%;
	width: 100%;
	border: 1px solid black;
}
	.parent {
	display: flex;
	font-size: 0;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-bottom: -10px;
}
	.child {
	background: blue;
	height: 100px;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: calc(25% - 10px);
}
	.child:nth-child(even) {
	margin: 0 10px 10px 10px;
	background-color: lime;
}
	.child:nth-child(odd) {
	background-color: orange; 
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
  <div class="parent-wrapper">
    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </div>
</body>
</html>

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

;)

— ম্যাটিউস মানোসো বার্সকস্
সূত্র

1

আপনি যদি দয়া করে কেবল কোডিং কোডের চেয়ে ওপি প্রশ্নের উত্তর কেন দেন সে সম্পর্কে কিছু প্রসঙ্গ যুক্ত করতে পারেন।

— d219

যদি আপনি justify-content: space-evenly;প্রেন্টে যোগ করেন তবে তারা দুর্দান্তভাবে সারিবদ্ধ হয় এবং আপনার calcসন্তানের উপর এটি করতে হবে না । উদাহরণস্বরূপ ধন্যবাদ, যদিও!

— মতিটিজ

0

ফ্লেক্স মোড়ানো + নেতিবাচক মার্জিন

ফ্লেক্স বনাম কেন display: inline-block?

ফ্লেক্স উপাদান আকারের সাথে আরও নমনীয়তা দেয়
অন্তর্নির্মিত সাদা স্পেসিং ভেঙে পড়ুন ( পিতামাতার সাথে ঠিক 33% প্রস্থের উপযুক্ত নয় এমন 3 টি ইনলাইন-ব্লক ডিভ দেখুন )

নেতিবাচক মার্জিন কেন?

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

বাস্তবায়ন

https://codepen.io/zurfyx/pen/BaBWpja

<div class="outerContainer">
    <div class="container">
        <div class="elementContainer">
            <div class="element">
            </div>
        </div>
        ...
    </div>
</div>

:root {
  --columns: 2;
  --betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}

.outerContainer {
    overflow: hidden; /* Hide the negative margin */
}

.container {
    background-color: grey;
    display: flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--betweenColumns));
}

.elementContainer {
    display: flex; /* To prevent margin collapsing */
    width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
    margin: var(--betweenColumns);
}

.element {
    display: flex;
    border: 1px solid red;
    background-color: yellow;
    width: 100%;
    height: 42px;
}

— zurfyx
সূত্র

-12

ব্যবহার না করেই এখানে অন্য উপায় calc()।

// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
  margin: 0 2% 0 2%;
  width: 21%;
}

// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
  margin: 0 1.66666% 0 1.66666%;
  width: 30%;
}

// and so on!

এখানেই শেষ এটা পেতে ওখানে যাও. আরও নান্দনিক আকারের জন্য আপনি মাত্রাগুলির সাথে অভিনবতা পেতে পারেন তবে এটি ধারণা is

— wle8300
সূত্র

6

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

— নিক এফ

ফ্লেক্সবক্স: প্রতি সারি 4 আইটেম

বিকল্প সিএসএস গ্রিড পদ্ধতি:

ফ্লেক্স মোড়ানো + নেতিবাচক মার্জিন

বাস্তবায়ন