به من می گویند اولین بار از این: flexbox آسان است. این که آیا آن به دلیل مسائل اولیه تصویب، و یا چون ما به دست آوردید به لحاظ شناور خطوط و بلوک فکر می کنم، من اغلب از طراحان وب که آنها فکر می کنم Flexbox پیچیده برای پیاده سازی است بشنود. اما تکرار می کنم: flexbox آسان است.
یک ترفند برای درک flexbox که من به شما یاد می دهد، پس از آن همه روشن خواهد شد وجود دارد. اما در ابتدا، من می خواهم در مورد آنچه flexbox است صحبت کنید.
FLEXBOX چیست؟
Flexbox است مجموعه ای از خواص CSS است که ترکیب به پخش کردن محتوا در راه پاسخگو (یا انعطاف پذیر جعبه ماژول چیدمان به آن نام درست آن را).
Flexbox اولین روش طرح CSS که برای وب مدرن کار می کند. این منصفانه است که می گویند که تا flexbox حمایت می شد، هیچ روش طرح است که به خوبی با طراحی سایت پاسخگو کار کرده باشد.
مقدار زیادی از هک شناور شده است در اطراف، مانند تنظیم عناصر به صفحه نمایش: نشان دهنده بلوک و اجازه دادن به آنها به بسته بندی کردن. اما این ارائه تعدادی از مشکلات برای سایت های انعطاف پذیر، دست کم عدم کنترل و حذفی در اثر عناصر تغییر اندازه. به همین دلیل، بسیاری از وب سایت های پاسخگو هنوز هم جاوا اسکریپت جهت موقعیت محتوا استفاده کنید.
flexbox برای چیست؟
Flexbox توسط W3C به عنوان برای تخمگذاری از عناصر UI-چیزهایی مانند منوی در نظر گرفته شده توصیف اقلام آن را برای تخمگذاری از کل صفحه در نظر گرفته شده است.
دلیل آن را برای طرح کردن کل صفحه در نظر گرفته شده، این است که flexbox دارای یک ماژول همدم CSS، طرح ماژول شبکه است که برای طرح در نظر گرفته شده. طرح شبکه نظر گرفته می شود از روش های مناسب برای طرح بندی صفحه کامل. متاسفانه وجود دارد پشتیبانی بسیار محدود برای شبکه در حال حاضر، و منظور من از «محدود» 'هیچ. »حتی آخرین نسخه از کروم نتواند به حمایت از آن بدون پرچم.
خوشبختانه پشتیبانی از مرورگر برای flexbox است جامع تر است. و چون آن را حل بسیاری از مشکلات طرح مدرن، flexbox یک ابزار ایده آل است تا شبکه است که در نهایت به تصویب رسید.
اجزای یک ظاهر طراحی شده
Flexbox ایده آل برای یک ظاهر طراحی شده قطعات در یک صفحه است. قدرت واقعی flexbox، و دلیل این کار بسیار بسیار بهتر از دیگر گزینه های طرح بندی، می آید از سبک های اعلام در گروه از اقلام به جای آیتم های فردی.
وقتی که می آید به طرح، ما به ندرت نیاز به موقعیت یک آیتم-اگر تنها ما در حال برنامه ریزی برای انجام این کار، آن را بسیار بهتر را به استفاده از موقعیت. Flexbox بهترین کار هنگامی که آن را کنترل چگونه گروه از عناصر به یکدیگر مرتبط هستند.
همیشه یک چیز با در نظر گرفتن آن را در متن بعدی بزرگتر خود طراحی - یک صندلی در یک اتاق، یک اتاق در یک خانه، یک خانه در یک محیط، یک محیط را در یک برنامه شهرستان. - Eliel Saarinen
به این ترتیب، مشخصات flexbox را به دو قسمت، یک مجموعه از خواص است که به عنصر ظرف مراجعه کنید، و یک مجموعه از خواص است که به عناصر درون مراجعه تقسیم شده است.
پشتیبانی از مرورگر
پشتیبانی از مرورگر یک سوال پیچیده است، به طور معمول،. ساخته شده همه پیچیده تر برای flexbox دلیل flexbox دارای چندین گرامرهای مختلف است. دو دلی در اوایل، توسعه مستقل توسط برخی از تامین کنندگان مرورگر، و فرآیند تکرار شونده، ما را با چند نسخه مختلف از flexbox که همه نیاز به پذیرایی باقی مانده است.
خوشبختانه، با علاوه بر این از برخی از مرورگر پیشوند برای مرورگرهای قدیمی، ما هم اکنون می توانید بر روی آن تکیه می کنند. با توجه به caniuse.com، از مرورگرهای اصلی در حال حاضر تنها IE9 یک مشکل برای ما در حال حاضر.
خوشبختانه، مثل همه CSS، اگر flexbox می افتد، آن نتواند در سکوت. به این معنی که IE9 فقط آن را نادیده گرفت.
نسخه Flexbox
با تشکر از عدم متناوب از همکاری بین شاخه های مختلف کمیته ها و شرکت ها، اجرای flexbox است بسیار نزدیک به در همان زمان رقابت هرج و مرج از 00s اوایل که هر مرورگر واحد اجرا هر ملک تنها منحصر به فرد، و به اشتباه،. دادن همه به نفع شک، سه پیاده سازی flexbox را به سادگی یک روش تکرار شونده است که منجر به راه حل شایع ترین مفید بود.
سه نسخه از نحو flexbox که شما نیاز دارید به آگاهی از وجود دارد: قدیمی، عبور و جدید است. مرورگرهای مختلف پشتیبانی از گرامرهای مختلف، IE10 برای مثال از نحو عبور.
درست مثل پیشوندها مرورگر، ما ارسال نحو Flexbox از قدیمی ترین به جدید ترین، به طوری که به نحو جدیدترین پشتیبانی لغو گرامرهای قدیمی تر است.
برای مثال، ما ارسال ها: فلکس مانند:
صفحه نمایش: -webkit-جعبه / * قدیمی پیشوند برای WebKit است * /
صفحه نمایش: -moz-جعبه / * قدیمی پیشوند برای موزیلا * /
صفحه نمایش: -ms-flexbox. / * عبور برای اینترنت اکسپلورر پیشوند * /
صفحه نمایش: -webkit-فلکس؛ / * جدید برای WebKit است * پیشوند /
صفحه نمایش: فلکس؛ / * جدید * /
در منافع وضوح، من قصد ندارم به شیرجه رفتن به گرامرهای های قدیمی تر، و یا بحث محاسن پیش پردازنده، پس از پردازنده، و اسکریپت تبدیل های مختلف. در همه نمونه های من من قصد دارم به استفاده درست، نحو جدید.
هنگامی که آن را به کد تولید می آید من با استفاده از یک سری از mixin ها بی احترامی صحبت کردن برای گسترش حمایت flexbox به مرورگرهای قدیمی تر.
یک Mixin دارد بسیار عالی بی احترامی صحبت کردن در اینجا وجود دارد، که شما می توانید استفاده کنید برای جلوگیری از نفخ کد خود را، و یا استخراج نحو میراث.
راز درک flexbox
راز flexbox، آن است که یک جعبه نیست. تا به حال، تمام طرح بر روی وب استفاده از یک سیستم دکارتی X و Y، به رسم نقطه است. Flexbox، در مقابل، یک بردار است.
برای تلفن های موبایل بزرگ، درست است؟ Flexbox یک بردار است، به این معنی طول تعریف می کنیم و یک زاویه تعریف می کنیم. ما می توانیم زاویه بدون تاثیر تغییر طول،. و ما می توانیم طول را تغییر می دهد، بدون تاثیر زاویه.
این رویکرد جدید بدان معنی است که برخی از اصطلاحات flexbox است در ابتدا پیچیده است. به عنوان مثال، زمانی که ما موارد را به بالای یک ظرف فلکس چین، ما با استفاده از فلکس شروع، نه از بالا به دلیل اگر ما جهت تغییر، انعطاف پذیری شروع هنوز هم اعمال خواهد شد، اما بالا را نمی خواهد.
هنگامی که شما را در درک این روش، بسیاری از flexbox روشنی انداخته است.
