কেন্দ্রে একটি নমনীয় কলাম সহ আমার দুটি স্থির প্রস্থ কলাম থাকতে পারে?

Question

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

কলামগুলির জন্য মাত্রা নির্ধারণ করা সত্ত্বেও, উইন্ডো সঙ্কুচিত হওয়ার সাথে সাথে এগুলি সঙ্কুচিত বলে মনে হচ্ছে।

কেউ কীভাবে এটি সম্পাদন করতে জানেন?

ব্যবহারকারীদের কথোপকথনের উপর ভিত্তি করে ডান কলামটি লুকিয়ে রাখার জন্য একটি অতিরিক্ত জিনিস আমার করা দরকার, সেক্ষেত্রে বাম কলামটি তার নির্দিষ্ট প্রস্থটি এখনও রাখবে, তবে কেন্দ্রের কলামটি বাকী স্থানটি পূরণ করবে।

#container {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    max-width: 1200px;
}

.column.left {
    width: 230px;
}

.column.right {
    width: 230px;
    border-left: 1px solid #eee;
}

.column.center {
    border-left: 1px solid #eee;
}

<div id="container">
    <div class="column left">
        <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p>
    </div>
    <div class="column center">
        <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt="">
    </div>
    <div class="column right">
        Balint Zsako
        <br/> Someone’s Knocking at My Door
        <br/> 01.12.13
    </div>
</div>

এখানে একটি জেএসফিডাল: http://jsfiddle.net/zDd2g/185/

Comments

jsfiddle.net/5aor2b0x/11

— zloctb

Answer 1

ব্যবহার না করে width(যা ফ্লেক্সবক্স ব্যবহার করার সময় একটি পরামর্শ), আপনি flex: 0 0 230px;যার অর্থ ব্যবহার করতে পারেন :

• 0= বৃদ্ধি না (সংক্ষিপ্তকরণের জন্য flex-grow)
• 0= সঙ্কুচিত করবেন না (সংক্ষেপে flex-shrink)
• 230px= শুরু 230px(সংক্ষিপ্তকরণের জন্য flex-basis)

যার অর্থ: সর্বদা থাকুন 230px।

ভাজা দেখুন , ধন্যবাদ @ টাইলারএইচ

ওহ, এবং আপনি প্রয়োজন নেই justify-contentএবং align-itemsএখানে।

img {
    max-width: 100%;
}
#container {
    display: flex;
    x-justify-content: space-around;
    x-align-items: stretch;
    max-width: 1200px;
}
.column.left {
    width: 230px;
    flex: 0 0 230px;
}
.column.right {
    width: 230px;
    flex: 0 0 230px;
    border-left: 1px solid #eee;
}
.column.center {
    border-left: 1px solid #eee;
}

Comments

বর্তমান বাস্তবায়নে (কমপক্ষে ক্রোমে), আপনাকেও নিশ্চিত করতে হবে যে মধ্য কলামটি flex-growসংজ্ঞায়িত হয়েছে (যেমন 1 বলুন)। বেহালার Updated ।

— বেসেন

কেন শুধু প্রস্থ কাজ করে না? এবং আমার ফ্লেক্সটি দরকার: 0 0 230px ;?

— রদ্রিগো রুইজ

flex-grow: 1ক্রোম 53 তে তরল কলামের জন্য এখনও প্রয়োজনীয় Otherwise অন্যথায়, এটি বাকি প্রস্থ গ্রহণ করবে না। আমি মনে করি উত্তরের এই বিষয়টি বিবেচনা করা উচিত।

— থাইবিজি

এখনও বিভ্রান্ত যে কারও জন্য, flex: 0 0 200pxএকই কাজ করে width: 200px; flex-shrink: 0।

— Bryc

রুডি এটি হারিয়ে যাওয়ার ক্ষেত্রে আমি ফিডলটি

— TylerH

Answer 2

কলামগুলির জন্য মাত্রা নির্ধারণ করা সত্ত্বেও, উইন্ডো সঙ্কুচিত হওয়ার সাথে সাথে এগুলি সঙ্কুচিত বলে মনে হচ্ছে।

একটি ফ্লেক্স ধারক একটি প্রাথমিক সেটিং হয় flex-shrink: 1। এজন্য আপনার কলামগুলি সঙ্কুচিত হচ্ছে।

আপনি নির্দিষ্ট প্রস্থটিকে নির্দিষ্ট করে ( এটি হতে পারেwidth: 10000px ) তা বিবেচনাধীন নয় , flex-shrinkনির্দিষ্ট প্রস্থটিকে উপেক্ষা করা যেতে পারে এবং ফ্লেক্স আইটেমগুলি পাত্রে উপচে পড়া থেকে আটকাতে পারে।

আমি 3 টি কলাম সহ একটি ফ্লেক্সবক্স সেটআপ করার চেষ্টা করছি যেখানে বাম এবং ডান কলামগুলির একটি নির্দিষ্ট প্রস্থ রয়েছে ...

আপনার সঙ্কুচিত অক্ষম করতে হবে। এখানে কিছু বিকল্প রয়েছে:

.left, .right {
     width: 230px;
     flex-shrink: 0;
 }  

অথবা

.left, .right {
     flex-basis: 230px;
     flex-shrink: 0;
}

অথবা, স্পেক দ্বারা প্রস্তাবিত হিসাবে:

.left, .right {
    flex: 0 0 230px;    /* don't grow, don't shrink, stay fixed at 230px */
}

7.2। নমনীয়তার উপাদান

flexশর্টহ্যান্ড সাধারণভাবে ব্যবহারের জন্য উপযুক্তভাবে কোনও অনির্ধারিত উপাদান পুনরায় সেট করার কারণে লেখকগুলি লম্বা হাতের বৈশিষ্ট্যগুলি সরাসরি না রেখে শর্টহ্যান্ড ব্যবহার করে নমনীয়তা নিয়ন্ত্রণ করতে উত্সাহিত করা হয় ।

এখানে আরও বিশদ: নমনীয়-ভিত্তি এবং প্রস্থের মধ্যে পার্থক্যগুলি কী?

ব্যবহারকারীদের কথোপকথনের উপর ভিত্তি করে ডান কলামটি লুকিয়ে রাখার জন্য একটি অতিরিক্ত জিনিস আমার করা দরকার, সেক্ষেত্রে বাম কলামটি তার নির্দিষ্ট প্রস্থটি এখনও রাখবে, তবে কেন্দ্রের কলামটি বাকী স্থানটি পূরণ করবে।

এটা চেষ্টা কর:

.center { flex: 1; }

এটি কেন্দ্রের কলামটি যখন তার ভাইবোনদের স্থান অপসারণ করা হবে তখন তার স্থান সহ উপলভ্য স্থান গ্রহণ করতে অনুমতি দেবে।

সংশোধিত ফিডল

Comments

flex: 1;কেন্দ্রে যোগ divকরা যথেষ্ট ছিল, ধন্যবাদ।

— DIES

Answer 3

পুরানো ব্রাউজারগুলির সাথে সামঞ্জস্যতা একটি টানা হতে পারে, তাই পরামর্শ দেওয়া উচিত।

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

আপনার প্রয়োজনীয়তা মেটাতে বাম এবং ডান মান পরিবর্তন করুন।

ধন্যবাদ.

আশাকরি এটা সাহায্য করবে.

#container {
  display: flex;
}

.column.left {
  width: 100px;
  flex: 0 0 100px;
}

.column.right {
  width: 100px;
  flex: 0 0 100px;
}

.column.center {
  flex: 1;
  text-align: center;
}

.column.left,
.column.right {
  background: orange;
  text-align: center;
}

<div id="container">
  <div class="column left">this is left</div>
  <div class="column center">this is center</div>
  <div class="column right">this is right</div>
</div>