কীভাবে কোনও ফ্লেক্স ধারককে কেন্দ্র করতে হয় তবে ফ্লেক্স আইটেমগুলি বাম-সারিবদ্ধ করে

Question

আমি চাই ফ্লেক্স আইটেমগুলি কেন্দ্রিক হোক তবে যখন আমাদের কাছে দ্বিতীয় লাইন থাকে তখন 5 এর নিচে (নীচের চিত্র থেকে) থাকে এবং পিতামাতার কেন্দ্রিক না হয়।

আমার যা আছে তার উদাহরণ এখানে:

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  border: 1px solid gray;
  margin: 15px;
  padding: 5px;
  width: 200px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

http://jsfiddle.net/8jqbjese/2/

Answer 1

ফ্লেক্সবক্স চ্যালেঞ্জ এবং সীমাবদ্ধতা

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

কোড প্রশ্ন পোস্ট করা ব্যবহার করে, আমরা একটি নতুন আনমন ধারক বর্তমান আনমন ধারক (গোপন তৈরী করতে পারে ul), যা আমাদের কেন্দ্রে সম্ভব হবে ulসঙ্গে justify-content: center।

তারপরে এর ফ্লেক্স আইটেমগুলি ulবাম-প্রান্তিককরণের সাথে যুক্ত হতে পারে justify-content: flex-start।

#container {
    display: flex;
    justify-content: center;
}

ul {
    display: flex;
    justify-content: flex-start;
}

এটি বাম-সারিবদ্ধ ফ্লেক্স আইটেমগুলির একটি কেন্দ্রিক গ্রুপ তৈরি করে।

এই পদ্ধতির সমস্যাটি হ'ল নির্দিষ্ট পর্দার আকারে ডানদিকে একটি ফাঁক থাকবে ul, এটি আর কেন্দ্রিকভাবে প্রদর্শিত হবে না।

এটি ঘটে কারণ ফ্লেক্স লেআউটে (এবং, আসলে, সাধারণভাবে সিএসএস) ধারক:

1. জানেন না কখন কোন উপাদান মোড়ানো;
2. জানে না যে পূর্বে দখলকৃত স্থানটি এখন খালি, এবং
3. সংকীর্ণ লেআউট সঙ্কুচিত-মোড়ক করতে এর প্রস্থটিকে পুনরায় গণনা করে না।

ডানদিকে সাদা স্থানের সর্বোচ্চ দৈর্ঘ্য হ'ল ফ্লেক্স আইটেমের দৈর্ঘ্য যা ধারকটি সেখানে প্রত্যাশা করেছিল।

নীচের ডেমোতে, উইন্ডোটি অনুভূমিকভাবে পুনরায় আকার দেওয়ার মাধ্যমে, আপনি সাদা স্থানটি দেখতে এবং যেতে দেখতে পারেন।

ডেমো

---

একটি আরও ব্যবহারিক পদ্ধতির

ফ্লেক্সবক্স inline-blockএবং মিডিয়া কোয়েরি ব্যবহার না করে কাঙ্ক্ষিত বিন্যাসটি অর্জন করা যায় ।

এইচটিএমএল

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

সিএসএস

ul {
    margin: 0 auto;                  /* center container */
    width: 1200px;
    padding-left: 0;                 /* remove list padding */
    font-size: 0;                    /* remove inline-block white space;
                                        see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 18px;                 /* restore font size removed in container */
    list-style-type: none;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width:600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }
@media screen and (min-width: 1031px) and (max-width: 1230px) { ul { width: 1000px; } }

উপরের কোডটি বাম-সারিবদ্ধ শিশু উপাদানগুলির সাথে একটি অনুভূমিক কেন্দ্রিক ধারককে রেন্ডার করে:

ডেমো

---

অন্যান্য অপশন

• শেষ সারিটিতে ফ্লেক্স আইটেমগুলিকে সঠিকভাবে আকার দেওয়া এবং সারিবদ্ধ করা

• দেশান্দ্রো রাজমিস্ত্রি

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

  ^{উত্স: http://masonry.desandro.com/}

• সিএসএস গ্রিড লেআউট মডিউল স্তর 1

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

  ^{উত্স: https://drafts.csswg.org/css-grid/}

Comments

হ্যাঁ, লোকেরা যা করতে চায় এবং এর জন্য ফ্লেক্সবক্স ব্যবহার করে শেষ হয় তা কেবল একটি গ্রিড তৈরি করে। ভাগ্যক্রমে এটি সিএসএস গ্রিডগুলি কভার করবে যখন এটি আরও চূড়ান্ত স্থিতিতে আসে।

— টাইলারহ

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

— আসন

সম্ভবত অন্য ধারণাটি margin:0 autoপিতামাতার মোড়কের উপর করা, যাতে সমস্ত পৃষ্ঠাতে কেন্দ্রিক হয়। সেই বিন্দু থেকে, সমস্ত শিশু উপাদান, (যেমন প্রথম ফ্লেক্স-ধারক) কেবল এটি স্বাভাবিক প্রবাহ সারি প্রক্রিয়া সম্পর্কে চলে? মনে হচ্ছে এটি করা সহজ করা যেতে পারে।

— ক্লিভিস

Answer 2

আপনি সিএসএস গ্রিড দিয়ে এটি অর্জন করতে পারেন, কেবল ব্যবহার করুন repeat(autofit, minmax(width-of-the-element, max-content))

ul {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(210px, max-content));
       grid-gap: 16px;
       justify-content: center;
       padding: initial;
}

li {
    list-style-type: none;
    border: 1px solid gray;
    padding: 5px;
    width: 210px;
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

http://jsfiddle.net/rwa20jkh/

Comments

মজাদার. তবে ডানদিকের ফাঁকটি দূর করতে বা গ্রিডকে কেন্দ্র করে না

— লাল

@ রেড একটি জিনিস ভুল ছিল। আমি পরিবর্তিত justify-items: centerহয়েছে justify-content:center, এবং এখন এটি পুরোপুরি কেন্দ্র করে।

— জো 82

আমি 210pxভিতরের অংশটি বুঝতে পারি না minmax। কৃত্রিম বাধা না থাকলেও কীভাবে আমি একইভাবে করব 210px? ফ্লেক্সবক্সের সাথে এমন বাধা নেই। আমি ফ্লেক্সবক্সের মতো ঠিক একই ফলাফলটি চাই, তবে সামগ্রীর ক্ষেত্রটি অবশ্যই আপনার সমাধানের মতো কেন্দ্রিক হওয়া উচিত।

— আন্দ্রে মিখায়লোভ - লোলমাস

হাই @ অ্যান্ড্রেমিখায়লোভ-লোলমাস, আপনি যখন সমস্ত উপাদানগুলিতে একটি নির্দিষ্ট প্রস্থ নির্ধারণ করতে চান তখন এই পদ্ধতিটি কাজ করে। প্রশ্নটিতে, এটি প্রকাশিত হয়েছে width:200pxএবং আমার উদাহরণ হিসাবে width:210px, আমি যেমন সেট করেছি , আমি minmax

— সেটিকেও

@ জো 82২ স্পষ্ট করার জন্য ধন্যবাদ! Ar আপনি এটিকে স্বেচ্ছাকৃতির প্রস্থের উপাদানগুলির জন্য কাজ করার কোনও উপায় জানেন?

— আন্দ্রে মিখায়লোভ - লোলমাস

Answer 3

@ মাইকেল যেমন প্রস্তাবিত, এটি বর্তমান ফ্লেক্সবক্সের একটি সীমাবদ্ধতা। তবে আপনি যদি এখনও ব্যবহার করতে চান flexএবং justify-content: center;, তবে আমরা এটি একটি ডামি liউপাদান যুক্ত করে নির্ধারিত করতে পারি margin-left।

    const handleResize = () => {
        const item_box = document.getElementById('parentId')
        const list_length  = item_box.clientWidth
        const product_card_length = 200 // length of your child element
        const item_in_a_row = Math.round(list_length/product_card_length)
        const to_be_added = item_in_a_row - parseInt(listObject.length % item_in_a_row) // listObject is the total number items
        const left_to_set = (to_be_added - 1 ) * product_card_length // -1 : dummy item has width set, so exclude it when calculating the left margin 
        const dummy_product = document.querySelectorAll('.product-card.dummy')[0]
        dummy_product.style.marginLeft = `${left_to_set}px`
    }
    handleResize() // Call it first time component mount
    window.addEventListener("resize", handleResize); 

রেফারেন্সের জন্য এই ফিডলটি (আকার পরিবর্তন করুন এবং দেখুন) বা ভিডিও দেখুন

Answer 4

মার্জিনের সাথে কাঙ্ক্ষিত স্টাইলটি পাওয়ার একটি উপায় নিম্নলিখিত পদ্ধতিগুলি করা:

#container {
    display: flex;
    justify-content: center;
}

#innercontainer {
    display: flex;
    flex: 0.9; -> add desired % of margin
    justify-content: flex-start;
}

Answer 5

আপনি অন্যদের মতো একই শ্রেণীর সাথে অদৃশ্য উপাদানগুলি স্থাপন করতে পারেন (উদাহরণস্বরূপ উদ্বোধনের উদ্দেশ্যে মুছে ফেলা) এবং উচ্চতা 0 এ সেট করুন that এর সাথে, আপনি গ্রিডের একেবারে শুরুতে আইটেমগুলিকে ন্যায়সঙ্গত করতে সক্ষম হবেন।

উদাহরণ

<div class="table-container">
  <div class="table-content">
    <p class="table-title">Table 1</p>
    <p class="mesa-price">$ 20</p>
  </div>
  
  <!-- Make stuff justified start -->
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
  <div class="table-content" style="opacity: 0; cursor: default; height: 0; margin-bottom: 0;"></div>
</div>

ফলাফল

Answer 6

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

<View style={{alignItems: 'center', flexWrap: 'wrap', flexDirection: 'row'}}>
  <View style={{flex: 1}} />
    // Content here
  <View style={{flex: 1}} />
</View>

ওয়েব / সিএসএসে রূপান্তর করার পক্ষে যথেষ্ট সহজ।

Comments

আপনি প্রশ্নটি ভুল বুঝেছেন। ওপিতে 3 টি আইটেমকে কীভাবে কেন্দ্র করা যায় তা জিজ্ঞাসা করে না, তারা দ্বিতীয় সারিতে আইটেমগুলিকে কীভাবে রাখবেন তা জিজ্ঞাসা করবেন যখন সমস্ত আইটেম গোষ্ঠী হিসাবে কেন্দ্র করে এবং তার জন্য আপনার সমাধান কাজ করে না।

— আসন