ফ্লেক্স / গ্রিড লেআউটগুলি বোতাম বা ফিল্ডসেট উপাদানগুলিতে কাজ করছে না

Question 1

আমি <button>ফ্লেক্সবক্সের সাহায্যে একটি- ট্যাগের অভ্যন্তরীণ উপাদানগুলি কেন্দ্র করার চেষ্টা করছি justify-content: center। তবে সাফারি এগুলিকে কেন্দ্র করে না। আমি অন্য যে কোনও <p>ট্যাগে একই স্টাইলটি প্রয়োগ করতে পারি এবং এটি ইচ্ছাকৃতভাবে কাজ করে ( দস্তাবেজটি দেখুন)। কেবল বোতামটি বাম-সারিবদ্ধ হয়।

ফায়ারফক্স বা ক্রোম ব্যবহার করে দেখুন এবং পার্থক্যটি দেখতে পাবেন।

আমাকে কি ওভাররাইট করতে হবে এমন কোনও এজেন্ট শৈলী? নাকি এই সমস্যার আর কোনও সমাধান?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

স্নিপেট প্রসারিত করুন

এবং একটি জেএসফিডাল: http://jsfiddle.net/z3sfwtn2/2/

Question 2

সমস্যাটি

কিছু ব্রাউজারে <button>উপাদান এবং এর displayমধ্যে স্যুইচিংয়ের বাইরেও তার মান পরিবর্তন করে না । এর অর্থ হল যে কোনও উপাদান কোনও ফ্লেক্স বা গ্রিড ধারক বা একটিও হতে পারে না ।blockinline-block<button><table>

<button>উপাদানগুলি ছাড়াও , আপনি এই সীমাবদ্ধতা <fieldset>এবং <legend>উপাদানগুলিতে প্রয়োগ করতে পারেন ।

আরও তথ্যের জন্য নীচে বাগ রিপোর্ট দেখুন।

দ্রষ্টব্য: যদিও তারা ফ্লেক্স পাত্রে নাও হতে <button>পারে তবে উপাদানগুলি নমনীয় আইটেম হতে পারে।

সমাধান

এই সমস্যাটির জন্য একটি সহজ এবং সহজ ক্রস ব্রাউজার কার্যকর রয়েছে:

বিষয়বস্তুর মোড়ানো buttonএকটি span, এবং spanআনমন ধারক।

সমন্বিত এইচটিএমএল (একটিতে মোড়ানো buttonসামগ্রী span)

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

সমন্বিত সিএসএস (লক্ষ্যযুক্ত span)

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

সংশোধিত ডেমো

তথ্যসূত্র / বাগ রিপোর্ট

একটি <button>ফ্লেক্সবক্স একটি লিখিত সামগ্রীকে ব্লকফাইস করে তবে একটি ফ্লেক্স বিন্যাস প্রসঙ্গে স্থাপন করে না

ব্যবহারকারী (ওরিওল ব্রুফাউ): ফ্লেক্সবক্সের অনুমান অনুসারে শিশুদের <button>অবরুদ্ধ করা হয়েছে। তবে, <button>মনে হয় এটি একটি ফ্লেক্সের পরিবর্তে একটি ব্লক ফর্ম্যাটিং প্রসঙ্গটি প্রতিষ্ঠা করবে।

ব্যবহারকারী (ড্যানিয়েল হলবার্ট): এটি কার্যকরভাবে এইচটিএমএল স্পেকের প্রয়োজন। বেশ কয়েকটি এইচটিএমএল কনটেইনার-উপাদানগুলি "বিশেষ" এবং কার্যকরভাবে গেকোতে তাদের সিএসএস displayমানটিকে উপেক্ষা করে [এটি ইনলাইন-স্তর বনাম ব্লক-স্তরের কিনা তা বাদ দিয়ে]। <button>এর মধ্যে একটি। <fieldset>এবং <legend>পাশাপাশি আছে।

প্রদর্শনের জন্য সমর্থন যুক্ত করুন: <button>উপাদানগুলির মধ্যে ফ্লেক্স / গ্রিড এবং কলামसेट লেআউট

ব্যবহারকারী (ড্যানিয়েল হলবার্ট):

<button>খাঁটি সিএসএসে (ব্রাউজারগুলির মাধ্যমে) কার্যকর করা যায় না, তাই সিএসএসের দৃষ্টিকোণ থেকে তারা কিছুটা ব্ল্যাক বক্স। এর অর্থ হল যে তারা অগত্যা একইভাবে প্রতিক্রিয়া দেখায় না যেমন উদাহরণস্বরূপ <div> would

এটি ফ্লেক্সবক্সের সাথে নির্দিষ্ট নয় - যেমন আপনি overflow:scrollকোনও বোতাম চাপলে আমরা স্ক্রোলবারগুলি রেন্ডার করি না এবং আপনি যদি এটি রাখেন তবে আমরা এটি টেবিল হিসাবে রেন্ডার করি না display:table।

আরও পিছনে পা বাড়ানো, এটি নির্দিষ্ট নয় <button>। বিবেচনা করুন <fieldset>এবং <table>যা বিশেষ রেন্ডারিং আচরণ আছে।

আর পুরোনো timey এইচটিএমএল মত উপাদান <button>এবং <table>এবং <fieldset>কেবল কাস্টম সমর্থন করি না displayমান, খুব উচ্চ পর্যায়ের প্রশ্নের উত্তর উদ্দেশ্যে ছাড়া অন্য "এই উপাদান ব্লক-স্তরের বা ইনলাইন-স্তরের হয়", উপাদান প্রায় অন্যান্য সামগ্রী প্রবাহিত জন্য ।

আরও দেখুন:

Question 3

এখানে আমার সহজ হ্যাক।

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}

Question 4

ক্রোম 83 শুরু করা, buttonএখন যেমন কাজ করে inline-grid/grid/inline-flex/flexআপনি এখানে এই নতুন বৈশিষ্ট্যটি সম্পর্কে আরও দেখতে পারেন

এখানে একটি স্নিপেট রয়েছে (যারা 83 এবং ততোধিক ক্রোম ব্যবহার করছেন তাদের জন্য)

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}

<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

স্নিপেট প্রসারিত করুন