সিএসএস ফ্লেক্সবক্সের সাহায্যে স্থির প্রস্থের কলাম কীভাবে সেট করবেন

Question

কোডপেন: http://codepen.io/anon/pen/RPNpaP ।

আমি চাই যে লাল বাক্সটি কেবল 25 মিমি প্রশস্ত হোক - যখন পাশের পাশাপাশি দেখুন - আমি এই মিডিয়া ক্যোয়ারীর ভিতরে সিএসএস স্থাপন করে এটি অর্জনের চেষ্টা করছি:

@media all and (min-width: 811px) {...}

প্রতি:

.flexbox .red {
  width: 25em;
}

তবে আমি যখন এটি করি তখন এটি ঘটে:

http://i.imgur.com/niFBrwt.png

আমি কি ভুল করছি কোন ধারণা?

Answer 1

পরিবর্তে আপনার সম্পত্তি flexবা flex-basisসম্পত্তি ব্যবহার করা উচিত width। এমডিএন আরও পড়ুন ।

.flexbox .red {
  flex: 0 0 25em;
}

flexসিএসএস সম্পত্তি একটি সাঁটে লেখার সম্পত্তি তার মাত্রা পরিবর্তন করতে উপলব্ধ স্থান পূরণ করতে এক আনমন আইটেমের ক্ষমতা উল্লেখ করা হয়। এতে রয়েছে:

flex-grow: 0;     /* do not grow   - initial value: 0 */
flex-shrink: 0;   /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height  - initial value: auto */

---

একটি সাধারণ ডেমো দেখায় কিভাবে প্রথম কলামটি 50pxস্থির প্রস্থে সেট করা যায় ।

.flexbox {
  display: flex;
}
.red {
  background: red;
  flex: 0 0 50px;
}
.green {
  background: green;
  flex: 1;
}
.blue {
  background: blue;
  flex: 1;
}

<div class="flexbox">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

---

আপনার কোডের উপর ভিত্তি করে আপডেট কোডেকটি দেখুন ।

Comments

বুঝতে পারিনি আমাকে ওভাররাইড করতে হবে flex-shrink, ধন্যবাদ, ভাল উত্তর।

— পল রেডমন্ড

নমনীয় ভিত্তি পেতে পারেনি: আমার উপাদান লাইব্রেরির গ্রিড (শব্দার্থ UI প্রতিক্রিয়া) না পেয়ে আমি অটোর কাজ করতে কলামটির ডিফল্ট প্রস্থ 😅 মাঝারি.ফ্রেইকোডেক্যাম্প.আর.এ.জি

— রোমান

Answer 2

যদি কেউ শতাংশ (%) সহ একটি প্রতিক্রিয়াশীল ফ্লেক্সবক্স রাখতে চায় তবে মিডিয়া অনুসন্ধানগুলির পক্ষে এটি অনেক সহজ।

flex-basis: 25%;

এটি পরীক্ষা করার সময় অনেক মসৃণ হবে।

// VARIABLES
$screen-xs:                                         480px;
$screen-sm:                                         768px;
$screen-md:                                         992px;
$screen-lg:                                         1200px;
$screen-xl:                                         1400px;
$screen-xxl:                                        1600px;

// QUERIES
@media screen (max-width: $screen-lg) {
    flex-basis: 25%;
}

@media screen (max-width: $screen-md) {
    flex-basis: 33.33%;
}