javascript কীভাবে ফ্লেক্স বক্স ব্যবহার করে ডিভগুলি পুনরায় অর্ডার করবেন?



html css (1)

আমি সম্পূর্ণ ডিভাইসগুলিকে বিভিন্ন অবস্থানে প্রদর্শন করার জন্য পুনরাবৃত্তি না করে আমার ডিওএমের জন্য একটি সিও বান্ধব এবং শব্দার্থক কাঠামো রাখার চেষ্টা করছি।

আমার বিন্যাস display: flex আইটেমের উপর ভিত্তি করে। আমি নিম্নলিখিতগুলি অর্জন করার চেষ্টা করি:

জেনে রাখা গুরুত্বপূর্ণ বিষয়:

  • আমি উইন্ডো প্রস্থের ভিত্তিতে ডিভিডগুলি প্রদর্শন / আড়াল করতে চাই না (অপ্রয়োজনীয় সদৃশগুলি এড়াতে)
  • ডিভগুলির কোনওটিরই জানা বা নির্দিষ্ট উচ্চতা নেই
  • ডেস্কটপগুলিতে ডিভগুলি উল্লম্ব কেন্দ্রিক হওয়া উচিত, যখন ডান কলামটি একটি ট্যাগ-দল তৈরি করে (একক ডিভের মতো আচরণ করে)
  • লেআউটটির কমপক্ষে IE11 + সমর্থন করা দরকার

এটি অর্জনের জন্য কি কোনও সিএসএস সমাধান রয়েছে?

যদি তা না হয় তবে সবুজ ডিভ কাটা এবং জাভাস্ক্রিপ্ট ব্যবহার করে এর বিষয়বস্তু গোলাপী রঙে আটকানো সহজ হবে। তবে এটি ব্যবহার করে পারফরম্যান্স এবং "ঝাঁকুনি" সম্পর্কে আমার উদ্বেগ রয়েছে, যদিও ব্রাউজারটির আকার পরিবর্তন করা আরও জটিল করে তোলে। আমি কি এটিকে অযথা জটিল করে তুলছি?

এখানে ফিডাল একটি কার্যক্ষম সমাধান দেখায় তবে জাভাস্ক্রিপ্ট সহ :

কোডোপেন ডেমো


সাধারণভাবে, আপনি একা ফ্লেক্সবক্সের সাথে এটি করতে পারবেন না, যদিও প্রতিটি প্রদত্ত কেসের উপর ভিত্তি করে কোনও আপস হতে পারে।

একা ফ্লেক্সবক্সের সাহায্যে স্থির উচ্চতা ব্যবহার করে আপনি এটি সম্পাদন করতে পারেন

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);  
  display: flex;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}
.flex::before {
  content: '';
  height: 100%;
}

@media (max-width:768px) {
  .flex div {
    width: auto;
  }
  .flex::before {
    display: none;
  }
 .flex div:nth-child(2) {
    order: 0;
  }
}


/*  styling  */
.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
}
.flex-child:nth-child(1) {
  background: #e6007e;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
}
<div class="flex">
  <div class="flex-child">
    <div>Top/Right</div>
  </div>
  <div class="flex-child">
    <div>Center/Left</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right</div>
  </div>
</div>

এই ক্ষেত্রে, যেখানে কোনও নির্দিষ্ট উচ্চতার অনুমতি নেই সেখানে আপনি ফ্লেক্সবক্স এবং float একত্রিত করতে পারেন।

এটি ফ্লেক্সবক্স ব্যবহার করে মোবাইলের জন্য সেট আপ করে যেখানে আপনি প্রথমে মার্কআপটিতে কেন্দ্রের আইটেম যুক্ত করেন এবং তারপরে order দিয়ে এটিকে উপরের এবং নীচের মাঝে সরিয়ে নিন।

মিডিয়া ক্যোয়ারির সাহায্যে আপনি কেবল ফ্লেক্স ধারকটিকে একটি ব্লক উপাদান হিসাবে তৈরি করতে পারেন এবং বাম থেকে বামে এবং ডানদিকে ডানদিকে অবস্থান করতে float ব্যবহার করেন।

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  max-width: 1024px;
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
  padding: 5%;
  flex-basis: 33.333%;

  display: flex;
  align-items: center;
}

.flex-child:nth-child(1) {
  background: #e6007e;
  order: 1;
}
.flex-child:nth-child(2) {
  background: #f4997c;
}
.flex-child:nth-child(3) {
  background: #86c06b;
  order: 2;
}

@media (min-width: 768px) {
  .flex {
    display: block;
  }
  .flex-child {
    width: 50%;
  }
  .flex-child:nth-child(1) {
    float: left;
    height: 100%;
  }
  .flex-child:nth-child(2),
  .flex-child:nth-child(3) {
    float: right;
    height: 50%;
  }
}
<div class="flex">
  <div class="flex-child">
    <div>Center/Left</div>
  </div>
  <div class="flex-child">
    <div>Top/Right</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right</div>
  </div>
</div>

হালনাগাদ

ফ্লেক্সবক্সের position: absolute সাথে একত্রিত করার জন্য এখানে আরও একটি সংস্করণ রয়েছে position: absolute , যা ডেস্কটপ মোডে উল্লম্বভাবে আইটেমগুলিকেও কেন্দ্র করে

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

দ্রষ্টব্য, স্ক্রিপ্টটি কোনওভাবেই অনুকূলিত নয়, এটি নির্দিষ্ট পরিস্থিতিতে কীভাবে ঠিক হয়েছে তা দেখানোর জন্য রয়েছে

(function() {

  window.addEventListener("resize", resizeThrottler, false);

  var fp = document.querySelector('.flex');
  var fi = fp.querySelector('.flex-child:nth-child(1)');
  var resizeTimeout;
  function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if ( !resizeTimeout ) {
      resizeTimeout = setTimeout(function() {
        resizeTimeout = null;
        actualResizeHandler();
     
       // The actualResizeHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualResizeHandler() {
    // handle the resize event
    if (fp.offsetHeight <= fi.offsetHeight) {
      fp.style.cssText = 'height: '+fi.offsetHeight+'px';
    } else {
      fp.style.cssText = 'height: auto';
    }
  }

  window.addEventListener('load', function() {
    actualResizeHandler();
  })
  
}());
* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.flex {
  position: relative;
  max-width: 1024px;
  width: 90%;
  margin: 5vh auto;
  height: 90vh;
  background: rgba(0, 0, 0, 0.05);
  
  display: flex;
  flex-direction: column;
}

.flex-child {
  color: white;
  font-size: 2em;
  font-weight: bold;
  padding: 5%;
}

.flex-child:nth-child(1) {
  order: 1;
}
.flex-child:nth-child(3) {
  order: 2;
}

.flex-child:nth-child(1) div {
  background: #e6007e;
}
.flex-child:nth-child(2) div {
  background: #f4997c;
}
.flex-child:nth-child(3) div {
  background: #86c06b;
}

@media (min-width: 768px) {
  .flex {
    justify-content: center;
  }
  .flex-child {
    width: 50%;
  }
  .flex-child:nth-child(1) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .flex-child:nth-child(n+2) {
    margin-left: 50%;
  }
}
<div class="flex">
  <div class="flex-child">
    <div>Center/Left<br>with more<br>content<br>than any<br>of the<br>other items<br>other items<br>other items<br>other items<br>other items</div>
  </div>
  <div class="flex-child">
    <div>Top/Right<br>with more<br>content</div>
  </div>
  <div class="flex-child">
    <div>Bottom/Right<br>with more</div>
  </div>
</div>

স্ক্রিপ্টের সাহায্যে উপাদানগুলির মধ্যে আইটেমগুলি পুনরায় অর্ডার / সরানো যায়।

স্ট্যাক স্নিপেট

আপনি এটি মিডিয়া ক্যোয়ারির সাথেও একত্রিত করতে পারেন এবং উপাদানগুলির প্রকৃত পুনঃ-ক্রম করতে এটি ব্যবহার করতে পারেন

$( document ).ready(function() {
  $(window).resize(function() {
    if ($( window ).width() < 600 ) {
      $(".one").insertBefore("#b");
    } else {
      $(".one").insertBefore(".two");
    }
  });
});
.outer, #flex, #flex2 {
  display: flex;
  flex-direction: column;
}
#a {
  order: 4;
  background: #ccc;
}
#b {
  order: 1;
  background: #aaa;
}
#c {
  order: 3;
  background: #d33;
}
.one {
  order: 2;
  background: #aaa;
}
.two {
  order: 5;
  background: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="outer">
  <div id="flex">
    <div id="a">A</div>
    <div id="b">B</div>
    <div id="c">C</div>
  </div>

  <div id="flex2">
    <div class="one">Show me 2nd</div>
    <div class="two">Show me 5th</div>
  </div>

</div>

আপডেট 2 ( অন্য প্রশ্নের উত্তর দেওয়া হলেও পরে এখানে সরিয়ে নেওয়া হয়েছে)

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

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

ফিডাল ডেমো

স্ট্যাক স্নিপেট

.container {
  display: flex;
}
.container > div {
  width: 50%;
}
.container div:nth-child(-n+2) {
  border: dashed;
  padding: 10px;
}
.container > div:nth-child(1) {
  display: none;                                  /*  hide outer "Flower"  */
}

@media (max-width:768px) {
  .container {
    flex-direction: column;
  }
  .container div {
    width: auto;
  }
 .container div:nth-child(1) {
    display: block;                               /*  show outer "Flower"  */
  }
  .container div:nth-child(3) div:nth-child(1) {
    display: none;                                /*  hide inner "Flower"  */
  }
}
<div class="container">
  <div>Flower</div>
  <div>Tree</div>
  <div>
    <div>Flower</div>
    <div>Bee</div>
  </div>
</div>





flexbox