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


93

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

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

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

এটি আমার কোড:

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


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

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

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

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

উত্তর:


180

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

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

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


121
ওহে সিএসএস, আপনি আমাকে কেন
বিরক্তি

4
চমৎকার উত্তর
পলান্ন

4
কনটেইনারটির ব্যাকগ্রাউন্ড রঙ বা সীমানা থাকলে এটি কাজ করে না
ফ্র্যাঙ্ক ভ্যান উইজক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.