বাম এবং ডানদিকে কীভাবে ফ্লেক্সবক্স কলামগুলি সারিবদ্ধ করবেন?

Question

টিপিক্যাল সিএসএসের সাহায্যে আমি দুটি কলামের একটিতে বামে এবং অন্যদিকে ডানদিকে কিছুটা জলের জায়গা দিয়ে ভাসতে পারি। আমি কীভাবে এটি ফ্লেক্সবক্স দিয়ে করব?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

Answer 1

আপনি justify-content: space-betweenপ্যারেন্ট উপাদান যোগ করতে পারে । এটি করার মাধ্যমে, বাচ্চাদের ফ্লেক্সবক্স আইটেমগুলি তাদের মধ্যবর্তী স্থানের সাথে বিপরীত দিকে সংযুক্ত করা হবে।

আপডেট করা উদাহরণ

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

---

margin-left: autoডানদিকে প্রান্তিককরণের জন্য আপনি দ্বিতীয় উপাদানটিতেও যুক্ত করতে পারেন।

আপডেট করা উদাহরণ

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Comments

আরে, আপনি কী এখানে উপাদান ব্যবহার করে উপাদানটি সঠিকভাবে সংযুক্ত হয়ে যায় তা ব্যাখ্যা করতে পারেন margin-left: auto?

— hulkinBrain

: @hulkinBrain, এখানে ব্যাখ্যা stackoverflow.com/a/33856609/3597276

— মাইকেল বেঞ্জামিন

দ্রষ্টব্য: margin-left: autoএবং margin-right: autoকৌতুক IE11 সামঞ্জস্যপূর্ণ নয়, যাদের এখনও এটি সমর্থন করতে হবে।

— তেত্রাদেভ

Answer 2

ফলাফল অর্জনের জন্য আমি 4 টি পদ্ধতি নিয়ে এসেছি। এখানে ডেমো রয়েছে

পদ্ধতি 1:

#a {
    margin-right: auto;
}

পদ্ধতি 2:

#a {
    flex-grow: 1;
}

পদ্ধতি 3:

#b {
    margin-left: auto;
}

পদ্ধতি 4:

#container {
    justify-content: space-between;
}

Comments

পদ্ধতি 5: flex:1;আপনি অতিরিক্ত স্থান যেখানেই চান সেখানে একটি অতিরিক্ত খালি উপাদান প্রবেশ করান :)

— অ্যাডামডপোর্ট

আপনি যদি সিসিপল লিঙ্কের পরিবর্তে কোড স্নিপেট এম্বেড করেন তবে এটি সেরা, সবচেয়ে সম্পূর্ণ উত্তর হবে।

— স্টাইফেল

পদ্ধতি 1 এবং 3 আই 11 এর সাথে সামঞ্জস্যপূর্ণ নয়!

— পিটার হজলুন্ড অ্যান্ডারসন

Answer 3

অন্য বিকল্পটি হ'ল flex: autoআপনার ট্যাগগুলির মধ্যে শৈলীর সাথে অন্য ট্যাগ যুক্ত করা উচিত যা আপনি বাকী স্থানটি পূরণ করতে চান।

https://jsfiddle.net/tsey5qu4/

এইচটিএমএল:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

সিএসএস:

.fill-remaining-space {
  flex: auto;
}

এটি ফ্লেক্সের সমতুল্য: 1 1 অটো, যা মূল অক্ষের সাথে কোনও অতিরিক্ত স্থান শোষণ করে।

Answer 4

বিভিন্ন উপায় আছে তবে সবচেয়ে সহজ হ'ল শেষের উদাহরণটি দেখতে স্পেস-মধ্যবর্তী স্থানটি ব্যবহার করা

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

উদাহরণ দেখুন