মার্জিন-শীর্ষ কেবলমাত্র যখন ফ্লেক্স আইটেমটি মোড়ানো থাকে

Question

আমার কাছে দুটি ফ্লেক্স আইটেম সহ একটি ফ্লেক্স ধারক রয়েছে। আমি দ্বিতীয়টিতে একটি মার্জিন-শীর্ষ সেট করতে চাই, তবে কেবল যখন এটি আবৃত থাকে এবং প্রথম ফ্লেক্স লাইনে নয়।

সম্ভব হলে আমি মিডিয়া ক্যোয়ারী ব্যবহার করা এড়াতে চাই।

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

এটি আমার কোড:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item-big {
  background: blue;
  width: 300px;
}
.item-small {
  background: red;
  margin-top: 30px;
}

<div class="container">
  <div class="item-big">
    FIRST BIG ELEM
  </div>
  <div class="item-small">
    SECOND SMALL ELEM
  </div>
</div>

Comments

ডিবাগিং সহায়তা চাইলে ("এই কোডটি কেন কাজ করছে না?") অবশ্যই প্রশ্নটিতে পুনরুত্পাদন করার জন্য পছন্দসই আচরণ, একটি নির্দিষ্ট সমস্যা বা ত্রুটি এবং সংক্ষিপ্ততম কোড অন্তর্ভুক্ত করতে হবে । এই প্রয়োজনীয়তা পেতে দয়া করে কোড ব্লকগুলি ব্যবহার করবেন না ।

— পাওলি_ডি

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

— ম্যানুয়েল ডি ইওরিও

বিষয়টি হ'ল ভবিষ্যতের ব্যবহারকারীগণের উপযোগিতা । যদি আপনার জেএসফিডাল লিঙ্কটি চলে যায় তবে আপনার পোস্টটি মূলত অকেজো। এজন্য এসও কোড জিজ্ঞাসা করে .... আদর্শভাবে যখন আপনি প্রশ্ন তৈরি করবেন তখন কোড স্নিপেটগুলিতে আপনার কাছে উপলব্ধ।

— পাওলি_ডি

ঠিক আছে, আমি বুঝতে পেরেছি, আমি নিয়মগুলি মেনে চলার জন্য প্রশ্নটি সম্পাদনা করছি;)

— ম্যানুয়েল ডি ইওরিও

Answer 1

আপনি margin-topউভয় ফ্লেক্স আইটেম কিছু যোগ করতে পারেন , এবং margin-topএকই পরিমাণে নেতিবাচক ফ্লেক্স ধারক মধ্যে।

এইভাবে, ফ্লেক্স ধারকটির নেতিবাচক মার্জিনটি প্রথম লাইনে ফ্লেক্স আইটেমগুলির মার্জিনটি নিরপেক্ষ করবে, তবে অন্য লাইনে আবৃত আইটেমগুলির মার্জিনটি নয় not

.container {
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: -30px;
}
.item-big, .item-small {
  margin-top: 30px;
  background: red;
}
.item-big {
  background: blue;
  width: 300px;
}

<div class="container">
   <div class="item-big">
      FIRST BIG ELEM
   </div>
   <div class="item-small">
      SECOND SMALL ELEM
   </div>
</div>

Comments

ওহে সিএসএস, আপনি আমাকে কেন

— বিরক্তি

চমৎকার উত্তর

— পলান্ন

কনটেইনারটির ব্যাকগ্রাউন্ড রঙ বা সীমানা থাকলে এটি কাজ করে না

— ফ্র্যাঙ্ক ভ্যান উইজক