مرکز در CSS

در حین انجام یک سری آزمایشات، 5 تکنیک مرکزی را دنبال کنید تا ببینید کدام یک برای تغییر انعطاف پذیرتر است.

آدام آرگیل

تمرکز در CSS یک چالش بدنام است که مملو از شوخی و تمسخر است. CSS 2020 همه بزرگ شده اند و اکنون می توانیم صادقانه به این جوک ها بخندیم، نه از روی دندان های به هم فشرده.

اگر ویدیو را ترجیح می دهید، در اینجا یک نسخه YouTube از این پست وجود دارد:

چالش

انواع مختلفی از مرکز وجود دارد. از موارد استفاده متفاوت، تعداد چیزها به مرکز، و غیره. به منظور نشان دادن منطقی در پشت تکنیک مرکزگذاری "برنده"، من The Resilience Ringer را ایجاد کردم. این یک سری تست استرس برای هر استراتژی متمرکز است تا در درون خود تعادل ایجاد کند و شما عملکرد آنها را مشاهده کنید. در پایان، تکنیک بالاترین امتیاز و همچنین "با ارزش ترین" را نشان می دهم. امیدواریم با تکنیک‌ها و راه‌حل‌های جدید متمرکز شوید.

زنگ تاب آوری

Resilience Ringer نشان‌دهنده باور من است که یک استراتژی متمرکز باید در برابر طرح‌بندی‌های بین‌المللی، درگاه‌های نمایش با اندازه متغیر، ویرایش‌های متن و محتوای پویا انعطاف‌پذیر باشد. این اصول به شکل گیری آزمون های انعطاف پذیری زیر برای پایداری تکنیک های متمرکز کمک کرد:

  1. Squished: مرکز باید بتواند تغییرات عرض را کنترل کند
  2. Squashed: مرکز باید بتواند تغییرات ارتفاع را کنترل کند
  3. تکراری: مرکز دادن باید به تعداد موارد پویا باشد
  4. ویرایش: تمرکز باید نسبت به طول و زبان محتوا پویا باشد
  5. جریان: مرکز باید جهت سند و حالت نوشتن آگنوستیک باشد

راه حل برنده باید انعطاف پذیری خود را با نگه داشتن مطالب در مرکز نشان دهد، در حالی که فشرده، فشرده، تکراری، ویرایش، و جابجایی به حالت ها و جهت های مختلف زبان است. مرکز قابل اعتماد و مقاوم، مرکز امن.

افسانه

من برخی از نکات رنگی بصری را برای کمک به شما در حفظ برخی اطلاعات متا در زمینه ارائه کرده ام:

  • حاشیه صورتی نشان دهنده مالکیت سبک های متمرکز است
  • جعبه خاکستری پس زمینه روی ظرف است که به دنبال داشتن اقلام در مرکز است
  • هر کودک دارای یک رنگ پس‌زمینه سفید است، بنابراین می‌توانید هر اثری را که تکنیک وسط روی اندازه‌های جعبه کودک می‌گذارد (در صورت وجود) ببینید.

5 شرکت کننده

5 تکنیک مرکزی وارد رینگر رزیلینس می شود که فقط یکی تاج رزیلینس را دریافت می کند.

1. مرکز محتوا

ویرایش و کپی محتوا با VisBug
  1. Squish : عالی!
  2. کدو حلوایی : عالی!
  3. تکراری : عالی!
  4. ویرایش : عالی!
  5. جریان : عالی!

شکست دادن مختصر بودن display: grid و خلاصه نویسی place-content . از آنجایی که به طور جمعی کودکان را متمرکز می کند و آنها را توجیه می کند، یک تکنیک مرکزی محکم برای گروه هایی از عناصر است که قرار است خوانده شوند.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
طرفداران
  • محتوا حتی در فضای محدود و سرریز متمرکز می شود
  • مرکز کردن ویرایش ها و نگهداری همه در یک نقطه هستند
  • شکاف فاصله برابر بین n کودک را تضمین می کند
  • Grid به طور پیش فرض ردیف ها را ایجاد می کند
منفی
  • گسترده ترین فرزند ( max-content ) عرض را برای بقیه تعیین می کند. این موضوع در Gentle Flex بیشتر مورد بحث قرار خواهد گرفت.

برای طرح‌بندی‌های کلان حاوی پاراگراف‌ها و سرفصل‌ها، نمونه‌های اولیه یا به طور کلی چیزهایی که نیاز به مرکز خوانا دارند عالی است .

2. فلکس ملایم

  1. Squish: عالی!
  2. کدو حلوایی: عالی!
  3. تکراری: عالی!
  4. ویرایش: عالی!
  5. جریان: عالی!

Gentle Flex یک استراتژی واقعی تر است که فقط در مرکز قرار دارد. نرم و ملایم است، زیرا بر خلاف place-content: center ، اندازه جعبه کودکان در حین وسط تغییر نمی کند. تا حد امکان به آرامی، همه آیتم ها روی هم چیده شده، در مرکز قرار می گیرند و فاصله دارند.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
طرفداران
  • فقط تراز، جهت و توزیع را کنترل می کند
  • ویرایش ها و نگهداری همه در یک نقطه هستند
  • شکاف فاصله برابر بین n کودک را تضمین می کند
منفی
  • اکثر خطوط کد

برای چیدمان های ماکرو و میکرو عالی است .

3. Autobot

  1. اسکویش: عالی
  2. کدو حلوایی: عالی
  3. تکراری: خوب
  4. ویرایش: عالی
  5. جریان: عالی

کانتینر بدون سبک‌های هم‌ترازی انعطاف‌پذیر است، در حالی که بچه‌های مستقیم با حاشیه‌های خودکار مدل‌دهی می‌شوند. چیزی نوستالژیک و شگفت انگیز در مورد margin: auto در همه طرف های عنصر.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
طرفداران
  • ترفند سرگرم کننده
  • سریع و کثیف
منفی
  • نتایج ناخوشایند هنگام سرریز شدن
  • اتکا به توزیع به جای شکاف به این معنی است که چیدمان ها می توانند با لمس کناره ها توسط کودکان رخ دهند
  • "هل دادن" به موقعیت به نظر مطلوب نمی رسد و می تواند منجر به تغییر اندازه جعبه کودک شود.

عالی برای مرکز کردن نمادها یا شبه عناصر.

4. مرکز کرکی

  1. اسکویش: بد
  2. کدو حلوایی: بد
  3. تکراری: بد
  4. ویرایش: عالی!
  5. جریان: عالی! (تا زمانی که از ویژگی های منطقی استفاده کنید)

"مرکز کرکی" شرکت کننده تا حد زیادی خوشمزه ترین رقیب صدای ما است و تنها تکنیک مرکز سازی است که کاملاً متعلق به عنصر/کودک است. مرز صورتی داخلی انفرادی ما را ببینید!؟

.fluffy-center {
  padding: 10ch;
}
طرفداران
  • از محتوا محافظت می کند
  • اتمی
  • هر آزمون به طور مخفیانه حاوی این استراتژی متمرکز است
  • فضای کلمه شکاف است
منفی
  • توهم مفید نبودن
  • درگیری بین ظرف و اقلام وجود دارد، طبیعتاً زیرا هر کدام در مورد اندازه خود بسیار محکم هستند

عالی برای مرکز کلمه یا عبارت، برچسب ها، قرص ها، دکمه ها، تراشه ها و موارد دیگر.

5. Pop & Plop

  1. اسکویش: باشه
  2. کدو حلوایی: باشه
  3. تکراری: بد
  4. ویرایش: خوبه
  5. جریان: خوب

این "پاپ" می شود زیرا موقعیت مطلق عنصر را از جریان عادی خارج می کند. قسمت "plop" نام‌ها از زمانی می‌آید که من آن را بسیار مفید می‌دانم: آن را در بالای چیزهای دیگر قرار دادن. این یک تکنیک کلاسیک و کاربردی برای تمرکز روی همپوشانی است که نسبت به اندازه محتوا انعطاف‌پذیر و پویا است. گاهی اوقات شما فقط نیاز دارید که UI را در بالای UI دیگر قرار دهید.

طرفداران
  • مفید
  • قابل اعتماد
  • وقتی به آن نیاز دارید، بسیار ارزشمند است
منفی
  • کد با مقادیر درصد منفی
  • نیاز به position: relative به نیروی یک بلوک حاوی
  • خط زودهنگام و ناجور می شکند
  • در هر بلوک حاوی فقط 1 می تواند بدون تلاش اضافی وجود داشته باشد

عالی برای مدال ها، نان تست ها و پیام ها، پشته ها و جلوه های عمقی، پاپاورها.

برنده

اگر من در یک جزیره بودم و فقط می توانستم 1 تکنیک مرکز را داشته باشم، این…

[درام رول]

فلکس ملایم 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

همیشه می توانید آن را در شیوه نامه های من بیابید زیرا هم برای طرح بندی ماکرو و هم برای طرح بندی میکرو مفید است. این یک راه حل قابل اعتماد همه جانبه با نتایجی است که با انتظارات من مطابقت دارد. همچنین، از آنجایی که من یک معتاد ذاتی اندازه هستم، تمایل دارم در این راه حل فارغ التحصیل شوم. درست است که تایپ کردن بسیار زیاد است، اما مزایایی که ارائه می دهد بیشتر از کد اضافی است.

MVP

مرکز کرکی

.fluffy-center {
  padding: 2ch;
}

Fluffy Center به قدری خرد است که به راحتی می توان از آن به عنوان یک تکنیک مرکزی چشم پوشی کرد، اما یکی از اصلی ترین استراتژی های من در مرکز است. آنقدر اتمی است که گاهی فراموش می کنم دارم از آن استفاده می کنم.

نتیجه

چه نوع چیزهایی استراتژی های تمرکز شما را شکست می دهند؟ چه چالش های دیگری را می توان به زنگ تاب آوری اضافه کرد؟ من ترجمه و کلید ارتفاع خودکار روی ظرف را در نظر گرفتم... چه چیز دیگری!؟

حالا که می دانی من چگونه این کار را انجام دادم، شما چطور؟! بیایید رویکردهایمان را متنوع کنیم و همه راه‌های ساخت در وب را بیاموزیم. برای ایجاد نمونه مرکزی خود، دقیقاً مانند مواردی که در این پست وجود دارد، با این پست از Codelab پیروی کنید. نسخه خود را برای من توییت کنید ، و من آن را به بخش ریمیکس های انجمن در زیر اضافه می کنم.

ریمیکس های انجمن