فلکس باکس چیست؟ شرح تمام ویژگی های css، اصول اولیه، مزایا و معایب. Flexbox چند مثال مفید برای کار با پیوندهای Flex مفید
Flexbox برای ایجاد طرح‌بندی‌های رایج وب‌سایت، مانند طرح‌بندی سه ستونی، به اصطلاح جام مقدس، ایده‌آل است، جایی که تمام ستون‌ها بدون توجه به محتوایشان باید ارتفاع کامل را بگیرند. در این حالت در کد منبع، محتوای اصلی قبل از ناوبری و در خود صفحه، محتوای اصلی بعد از ناوبری می آید.
مثل این.
قبل از ظهور فلکس باکس، این نوع چیدمان بدون استفاده از نوعی هک بسیار سخت بود. توسعه‌دهندگان اغلب مجبور بودند کارهایی مانند اضافه کردن نشانه‌گذاری اضافی، اعمال حاشیه‌های منفی و سایر ترفندها را انجام دهند تا همه چیز را بدون توجه به مقدار محتوا یا اندازه صفحه نمایش، به درستی ردیف کنند. اما، همانطور که مثال بالا نشان می دهد، همه چیز در flexbox بسیار ساده تر است.
در اینجا خلاصه ای از کد آمده است. در این مثال، عنصر #main را به یک ظرف انعطاف‌پذیر تبدیل می‌کنیم، در حالی که سرصفحه و پاورقی را به عنوان عناصر سطح بلوک باقی می‌گذاریم. به عبارت دیگر فقط قسمت وسط تبدیل به فلکس باکس می شود. در اینجا قطعه ای وجود دارد که آن را به یک ظرف انعطاف پذیر تبدیل می کند.
#main (نمایشگر: انعطاف پذیر؛ حداقل ارتفاع: calc (100vh - 40vh)؛ )
ما فقط از display: flex برای ساختن ظرف فلکس استفاده می کنیم. توجه داشته باشید که مقدار min-height را نیز با تابع calc () تنظیم می کنیم و #main را روی 100% ارتفاع viewport قرار می دهیم. منهایارتفاع درپوش و زیرزمین (هر کدام 20 ولت ساعت). این تضمین می کند که چیدمان تمام ارتفاع صفحه را اشغال می کند، حتی اگر محتوای کمی داشته باشد. در نتیجه، اگر محتوا کمتر از ارتفاع صفحه باشد، پاورقی هرگز بالا نمی رود و فضای خالی زیر آن باقی نمی ماند.
با توجه به اعمال اندازه جعبه: جعبه مرزی برای همه عناصر، محاسبه حداقل ارتفاع به اندازه کافی آسان بود. اگر این کار را نکردیم، باید اضافه کنیم ارزش بالشتکیبه مقداری که باید کم شود.
بعد از نصب ظرف فلکس با آیتم های فلکس سروکار داریم.
#main > article ( flex: 1; ) #main > nav, #main > aside ( flex: 0 0 20vw; background: beige; ) #main > nav ( سفارش: -1; )
ویژگی flex مخفف خواص flex-grow، flex-shrink و flex-bases است. در حالت اول، ما فقط یک مقدار نوشتیم، بنابراین flex ویژگی flex-grow را تنظیم می کند. در حالت دوم، ما هر سه مقدار را برای آن نوشتیم
در این مقاله با تکنولوژی CSS Flexbox که برای ایجاد طرح بندی صفحات وب انعطاف پذیر طراحی شده است آشنا می شویم.
هدف از CSS Flexbox
CSS Flexbox برای ایجاد طرح بندی های انعطاف پذیر. با استفاده از این فناوری، چیدمان عناصر در یک ظرف، توزیع فضای موجود بین آنها و تراز کردن آنها به هر شکلی، حتی اگر اندازه خاصی نداشته باشند، بسیار آسان و انعطاف پذیر است.
CSS Flexbox ایجاد یک طراحی پاسخگو را بسیار آسان تر از استفاده از شناور و موقعیت یابی می کند.
Flexbox را می توان هم برای نشانه گذاری CSS کل صفحه و هم برای بلوک های جداگانه آن استفاده کرد.
پشتیبانی از مرورگر CSS Flexbox
CSS Flexbox توسط تمام مرورگرهای مدرن مورد استفاده در حال حاضر (با استفاده از پیشوندهای: IE10+، Edge12+، Firefox 2+، Chrome 4+، Safari 3.1+، Opera 12.1+، iOS Safari 3.2، Opera mini، Android 2.1+، Blackberry 7+) پشتیبانی می شود.
اصول CSS Flexbox
ایجاد نشانه گذاری CSS با Flexbox با تنظیم ویژگی CSS نمایش عنصر HTML مورد نیاز به flex یا flex-inline شروع می شود.
پس از آن، این عنصر به یک ظرف انعطاف پذیر تبدیل می شود و تمام آن فوریعناصر کودک آیتم های انعطاف پذیر هستند. علاوه بر این، وقتی در مورد flexbox صحبت می کنیم، منظور ما از این فقط یک عنصر با display:flex یا display:flex-inline و همه عناصر است. به طور مستقیمواقع در آن بنابراین، تنها دو نوع عنصر در CSS Flexbox وجود دارد: ظرف فلکس و عنصر فلکس.
ویژگی های پیشوند و حداکثر عرض برای پشتیبانی از طرح بندی توسط اکثر مرورگرها به CSS اضافه شده است.
برای "تبدیل" یک بلوک به یک ظرف انعطاف پذیر، از کلاس row استفاده می شود. تنظیم عرض عناصر flex .col__article و .col__aside در داخل ظرف flex با استفاده از ویژگی flex CSS انجام می شود.
به عنوان مثال، بیایید یک پاورقی دیگر را با استفاده از flexbox ترسیم کنیم و یک بلوک متشکل از سه عنصر در عنصر .col__article ایجاد کنیم (حداقل عرض یک عنصر 300 پیکسل است). چهار بلوک را در فوتر قرار می دهیم (حداقل عرض یک بلوک 200 پیکسل است).
من می خواهم در مورد FlexBox صحبت کنم. ماژول طرح بندی Flexbox (جعبه انعطاف پذیر - "بلوک انعطاف پذیر"، در حال حاضر توصیه نامزد W3C) با هدف ارائه راه کارآمدتر برای چیدمان، تراز و توزیع فضای آزاد بین عناصر در یک ظرف، حتی زمانی که اندازه آنها ناشناخته و / یا پویا است ( از این رو کلمه "انعطاف پذیر").
ایده اصلی چیدمان فلکس این است که به ظرف این امکان را بدهد که عرض / ارتفاع (و ترتیب) عناصر خود را تغییر دهد تا فضا را بهتر پر کند (در بیشتر موارد برای پشتیبانی از انواع نمایشگرها و اندازه های صفحه نمایش).یک ظرف انعطاف پذیر اقلام را برای پر کردن فضا کشیده یا فشرده می کند تا از سرریز شدن آن جلوگیری شود.
مهمتر از همه، طرح فلکس باکس برخلاف طرح‌بندی‌های معمولی بدون جهت است (جعبه‌ها عمودی هستند و عناصر درون خطی افقی هستند).در حالی که چیدمان معمولی برای صفحات وب عالی است، فاقد انعطاف پذیری برای پشتیبانی از برنامه های بزرگ یا پیچیده است (مخصوصاً وقتی صحبت از تغییر جهت صفحه نمایش، تغییر اندازه، کشش، فشار دادن و غیره می شود).
زیرا flexbox یک ماژول کامل است، نه فقط یک ویژگی، بلکه بسیاری از ویژگی ها را ترکیب می کند.برخی از آنها باید روی ظرف اعمال شوند (عنصر والد، با نام مستعار flex container)، در حالی که ویژگی های دیگر برای عناصر فرزند یا موارد انعطاف پذیر اعمال می شود.
در حالی که چیدمان منظم بر اساس جهت جریان عناصر بلوک و درون خطی است، طرح بندی فلکس بر اساس "جهت های جریان فلکس" است.
فلکس باکس
اساساً، اقلام یا در امتداد محور اصلی (از شروع اصلی تا انتهای اصلی) یا در امتداد محور متقاطع (از شروع متقاطع تا انتهای متقاطع) توزیع می شوند.
محور اصلی - محور اصلی که اقلام فلکس در امتداد آن قرار دارند.لطفاً توجه داشته باشید که باید افقی باشد، همه اینها به کیفیت توجیه محتوا بستگی دارد.
شروع اصلی | اقلام انعطاف پذیر اصلی از موقعیت شروع اصلی تا انتهای اصلی در ظرف قرار می گیرند.
اندازه اصلی - عرض یا ارتفاع عنصر فلکس، بسته به اندازه اصلی انتخاب شده.مقدار پایه می تواند عرض یا ارتفاع عنصر باشد.
محور متقاطع - محور عرضی عمود بر محور اصلی.جهت آن بستگی به جهت محور اصلی دارد.
شروع متقاطع | خطوط متقاطع - فلکس با اقلام پر شده و از حالت شروع متقاطع و موقعیت متقاطع در ظرف قرار می گیرند.
اندازه متقاطع - عرض یا ارتفاع عنصر فلکس، بسته به بعد انتخاب شده، برابر با این مقدار است.این ویژگی بسته به بعد انتخاب شده، همان عرض یا ارتفاع عنصر است.
خواص
صفحه نمایش: انعطاف پذیر | inline-flex;
یک محفظه انعطاف‌پذیر (بسته به مقدار انتخاب‌شده یا درون خطی یا بلوک) را تعریف می‌کند، شامل یک زمینه انعطاف‌پذیر برای همه فرزندان مستقیم آن است.
نمایش: مقادیر دیگر | انعطاف پذیر | inline-flex;
یادت باشه:
ستون های CSS با ظرف انعطاف پذیر کار نمی کنندشناور، شفاف و عمودی تراز بر روی آیتم های انعطاف پذیر کار نمی کند
جهت خم شدن
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود.
محور اصلی را تنظیم می کند، بنابراین جهت اقلام انعطاف پذیر قرار داده شده در ظرف را تعیین می کند.
flex-direction: row | ردیف معکوس | ستون | ستون معکوس
ردیف (پیشفرض): از چپ به راست برای ltr، از راست به چپ برای rtl.
row-reverse: از راست به چپ برای ltr، از چپ به راست برای rtl.
ستون: شبیه به ردیف، از بالا به پایین.
ستون- معکوس: مشابه ردیف- معکوس، از پایین به بالا.
بسته بندی انعطاف پذیر
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود.
تعیین تک خطی یا چند خطی بودن کانتینر و همچنین جهت محور عرضی، تعیین کننده جهتی است که خطوط جدید در آن قرار خواهند گرفت.
flex-wrap: nowrap | بسته بندی | پیچیدن معکوس
nowrap (پیش فرض): تک خط / از چپ به راست برای ltr، از راست به چپ برای rtl.
wrap: چند خطی / از چپ به راست برای ltr، از راست به چپ برای rtl.
wrap-reverse: چند خطی / از راست به چپ برای ltr، از چپ به راست برای rtl.
جریان انعطاف پذیر
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود.
این مختصر برای ویژگیهای flex-direction و flex-wrap است که با هم محورهای اصلی و متقاطع را مشخص میکنند.پیشفرض ردیفهای nowrap.
جریان انعطاف پذیر< ‘flex-direction’> || < ‘Flex-wrap’>
توجیه-محتوا
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود.
تراز را نسبت به محور اصلی مشخص می کند.به تخصیص فضای آزاد در مواردی که عناصر ردیف "کشیده نشده اند" یا کشیده شده اند، اما قبلاً به حداکثر اندازه خود رسیده اند کمک می کند.همچنین به شما این امکان را می دهد که تا حدی هم ترازی عناصر را در هنگام فراتر رفتن از خط کنترل کنید.
justify-content: flex-start | انتهای انعطاف پذیر | مرکز | فاصله بین | فضای اطراف
flex-start (پیشفرض): موارد به ابتدای خط منتقل میشوند.
flex-end: عناصر به انتهای خط منتقل می شوند.
مرکز: عناصر در وسط خط تراز شده اند.
فاصله بین: عناصر به طور مساوی فاصله دارند (نخستین عنصر در ابتدای خط، آخرین عنصر در پایان)
فضا در اطراف: عناصر به طور مساوی با فاصله مساوی بین خود و خارج از ردیف قرار دارند.
توجیه-محتوا
تراز کردن آیتم ها
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود.
رفتار پیش فرض را برای نحوه قرارگیری اقلام انعطاف پذیر نسبت به محور متقاطع در خط جاری مشخص می کند.آن را به عنوان نسخه ای از محتوای توجیهی برای محور متقاطع (عمود بر محور اصلی) در نظر بگیرید.
align-اقلام: flex-start | انتهای انعطاف پذیر | مرکز | پایه | کش آمدن
flex-start: مرز متقاطع برای عناصری که در موقعیت شروع متقاطع قرار دارند.
flex-end: مرز عرضی برای عناصر واقع در موقعیت متقاطع.
مرکز: عناصر در مرکز محور متقاطع تراز شده اند.
خط پایه: عناصر در خط پایه خود تراز می شوند.
کشش (پیشفرض): المانها برای پر کردن ظرف کشیده میشوند (مشروط به حداقل عرض / حداکثر عرض).
تراز کردن آیتم ها
تراز کردن محتوا
قبل از عنصر اصلی ظرف انعطاف پذیر اعمال می شود. خطوط ظرف فلکس را وقتی فضای خالی در محور متقاطع وجود دارد، تراز می‌کند، مشابه آنچه که justify-content در محور اصلی انجام میدهد. توجه: این ویژگی با فلکس باکس های تک خطی کار نمی کند.
align-content: flex-start | انتهای انعطاف پذیر | مرکز | فاصله بین | فضای اطراف | کش آمدن
flex-start: خطوط نسبت به ابتدای ظرف در یک راستا قرار دارند.
flex-end: خطوط نسبت به انتهای ظرف در یک راستا قرار دارند.
مرکز: ردیف ها با مرکز ظرف تراز شده اند.
فاصله بین: خطوط به طور مساوی فاصله دارند (خط اول در ابتدای خط، آخرین خط در پایان)
فضای اطراف: خطوط به طور مساوی با فاصله مساوی بین خود توزیع می شوند.
stretch (پیشفرض): خطوط برای پر کردن فضای آزاد کشیده میشوند.
تراز کردن محتوا
سفارش
به طور پیش فرض، اقلام انعطاف پذیر به ترتیب اصلی خود قرار می گیرند.با این حال، ویژگی order می تواند ترتیب ظاهر شدن آنها در ظرف را کنترل کند.
سفارش 1
رشد انعطاف پذیر
قبل از عنصر کودک / فلکس اعمال شد. توانایی یک عنصر انعطاف پذیر را برای "رشد" در صورت نیاز مشخص می کند.یک مقدار بی بعد می گیرد، به عنوان یک نسبت عمل می کند.تعیین می کند که عنصر چقدر فضای آزاد در داخل ظرف می تواند داشته باشد. اگر همه عناصر دارای ویژگی flex-grow روی 1 باشند، هر فرزند همان اندازه را در داخل ظرف خواهد داشت.اگر یکی از بچه ها را روی 2 تنظیم کنید، دو برابر بقیه فضا اشغال می کند.
رشد انعطاف پذیر
انعطاف پذیر
قبل از عنصر کودک / فلکس اعمال شد.
تعیین می کند که آیا یک عنصر انعطاف پذیر می تواند در صورت نیاز منقبض شود یا خیر.
انعطاف پذیر
اعداد منفی پذیرفته نمی شوند.
پایه انعطاف پذیر
قبل از عنصر کودک / فلکس اعمال شد. اندازه پیش فرض یک عنصر را قبل از تخصیص فضا در ظرف مشخص می کند.
پایه انعطاف پذیر
خم شدن
قبل از عنصر کودک / فلکس اعمال شد. این مختصر برای flex-grow، flex-shrink و flex-bases است.پارامترهای دوم و سوم (flex-shrink، flex-basis) اختیاری هستند.مقدار پیش فرض 0 1 خودکار است.
flex: هیچ | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]
خود تراز کردن
قبل از عنصر کودک / فلکس اعمال شد. به شما امکان میدهد تراز پیشفرض یا تراز آیتمها را برای موارد منعطف منفرد لغو کنید. برای درک بهتر مقادیر موجود به توضیحات ویژگی align-item مراجعه کنید.
align-self: خودکار | فلکس شروع | انتهای انعطاف پذیر | مرکز | پایه | کش آمدن
مثال ها
بیایید با یک مثال بسیار بسیار ساده شروع کنیم که تقریباً هر روز اتفاق می افتد: تراز کردن دقیقاً در مرکز.هیچ چیز با استفاده از flexbox آسان تر نیست.
والد (نمایشگر: انعطاف پذیر؛ ارتفاع: 300 پیکسل؛ ) .child ( عرض: 100 پیکسل؛ / * درست است * / ارتفاع: 100 پیکسل؛ / * درست است * / حاشیه: خودکار؛ / * جادویی! * / )
این مثال بر این واقعیت استوار است که حاشیه زیر محفظه انعطاف پذیر، که روی خودکار تنظیم شده است، فضای اضافی را جذب می کند، بنابراین وظیفه تورفتگی به این ترتیب عنصر را دقیقاً در مرکز در هر دو محور تراز می کند. حال اجازه دهید از برخی از ویژگی ها استفاده کنیم.مجموعه ای از 6 عنصر با اندازه ثابت (برای زیبایی) اما با قابلیت تغییر اندازه ظرف را تصور کنید.ما می خواهیم آنها را به طور یکنواخت به صورت افقی توزیع کنیم تا هنگامی که اندازه پنجره مرورگر تغییر می کند، همه چیز خوب به نظر برسد (بدون درخواست رسانه @!).
ظرف فلکس (
/* ابتدا یک زمینه انعطاف پذیر ایجاد کنید */
نمایش: فلکس;
/* حالا بیایید جهت جریان و اینکه آیا عناصر را می خواهیم مشخص کنیم
به خط جدید منتقل شد
* به یاد داشته باشید که این همان است:
* جهت فلکس: ردیف.
* بسته بندی فلکس: بسته بندی.
* /
flex-flow: row wrap;
/* حالا بیایید نحوه توزیع فضا را تعریف کنیم */
}
آماده. بقیه چیزها مربوط به طراحی است. بیایید چیز دیگری را امتحان کنیم.تصور کنید که ما یک ناوبری با تراز راست در بالای سایت خود میخواهیم، اما میخواهیم آن را در صفحههای با اندازه متوسط تراز وسط قرار داده و در صفحههای کوچک به یک ستون تبدیل شود.همه چیز کاملا ساده است.
/* صفحه نمایش بزرگ */
.جهت یابی(
نمایش: فلکس;
flex-flow: row wrap;
/* عناصر را به انتهای خط در امتداد محور اصلی منتقل می کند */
justify-content: flex-end;
}
رسانه همه و (حداکثر عرض: 800 پیکسل) (
.جهت یابی(
/* برای صفحه نمایش های با اندازه متوسط، ناوبری را در مرکز قرار می دهیم،
توزیع یکنواخت فضای آزاد بین عناصر * /
justify-content: فضای اطراف;
}
}
/* صفحه نمایش های کوچک */
رسانه همه و (حداکثر عرض: 500 پیکسل) (
.جهت یابی(
/* در صفحه های کوچک، به جای یک ردیف، عناصر را در یک ستون قرار می دهیم */
flex-direction: ستون;
}
}
بیایید با انعطاف پذیری آیتم های فلکس بازی کنیم!طرح سه ستونی سازگار با موبایل با هدر و پاورقی تمام عرض چطور؟و به ترتیبی متفاوت
لفاف (
نمایش: فلکس;
flex-flow: row wrap;
}
/* همه عناصر را روی 100% عرض تنظیم کنید */
.header، .main، .nav، .aside، .footer (
فلکس 1100%؛
}
/* در این مورد، برای هدف قرار دادن به دستور اصلی تکیه می کنیم
* دستگاه های موبایل:
* 1 سر
*2nav
* 3 اصلی
* 4 به کنار
* 5 پا
* /
/* صفحه نمایش با اندازه متوسط */
رسانه همه و (عرض حداقل: 600 پیکسل) (
/* هر دو ستون کناری در یک خط هستند */
.aside (فلکس: 1 خودکار؛ )
}
/* صفحه نمایش بزرگ */
Flexbox را به درستی می توان تلاشی موفق برای حل طیف گسترده ای از مشکلات هنگام ساخت طرح بندی در css نامید. اما قبل از اینکه به توضیح آن بپردازیم، بیایید دریابیم که چه اشکالی در روش های چیدمان که اکنون استفاده می کنیم چیست؟
هر ماشین تحریری روش های مختلفی را برای تراز کردن چیزی به صورت عمودی یا ایجاد یک طرح 3 ستونی با یک ستون وسط لاستیکی می داند. اما بیایید بپذیریم که همه این روش ها نسبتاً عجیب هستند، مانند هک به نظر می رسند، در همه موارد مناسب نیستند، درک آنها دشوار است و اگر شرایط جادویی خاصی که از لحاظ تاریخی ایجاد شده اند برآورده نشوند، کار نمی کنند.
این اتفاق افتاد زیرا html و css به طور تکاملی تکامل یافتند. در ابتدا صفحات وب شبیه اسناد متنی تک رشته ای بودند، کمی بعد صفحه به بلوک هایی با جداول تقسیم شد، سپس تایپ کردن با شناور مد شد و پس از مرگ رسمی ie6، ترفندهای بلاک درون خطی اضافه شد. در نتیجه، ما ترکیبی انفجاری از همه این تکنیکها را به ارث بردیم که برای ایجاد طرح‌بندی برای 99.9٪ از تمام صفحات وب موجود استفاده میشوند.
سازماندهی چند خطی بلوک ها در داخل یک ظرف انعطاف پذیر.
بسته بندی انعطاف پذیر
تمام مثال هایی که در بالا آوردیم با در نظر گرفتن آرایش تک خطی (تک ستونی) بلوک ها ساخته شده اند. باید بگویم که به طور پیش فرض، کانتینر flex همیشه بلوک های داخل خود را در یک خط قرار می دهد. با این حال، مشخصات از حالت چند خطی نیز پشتیبانی می کند. ویژگی CSS flex-wrap مسئول چند خط در یک ظرف انعطاف پذیر است.
مقادیر موجود بسته بندی انعطاف پذیر:
- در حال حاضر (مقدار پیش فرض): بلوک ها در یک خط از چپ به راست (به صورت rtl از راست به چپ) مرتب شده اند.
- بسته بندی: بلوک ها در چندین ردیف افقی چیده شده اند (اگر در یک ردیف قرار نگیرند). آنها از چپ به راست یکدیگر را دنبال می کنند (در rtl از راست به چپ)
- wrap-reverse: همان بسته بندی کردن، اما بلوک ها به ترتیب معکوس هستند.
flex-flow مختصر مفیدی برای flex-direction + flex-wrap است
در واقع فلکس جریان توانایی توصیف جهت اصلی و چندخط محور عرضی را در یک ویژگی فراهم می کند. بهطور پیشفرض flex-flow: row nowrap.
جریان انعطاف پذیر:<‘flex-direction’> || <‘flex-wrap’>
css
/* یعنی ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* این همان ... */ .my-flex-block( flex-flow: column wrap ;)تراز کردن محتوا
همچنین ویژگی align-content وجود دارد که تعیین می کند ردیف های حاصل از بلوک ها چگونه به صورت عمودی تراز شوند و چگونه کل فضای ظرف انعطاف پذیر را به اشتراک بگذارند.
مهم: align-content فقط در حالت چند خطی کار می کند (به عنوان مثال در مورد flex-wrap: wrap؛ یا flex-wrap: wrap-reverse؛)
مقادیر موجود تراز کردن محتوا:
- flex-start: ردیفهایی از بلوکها به ابتدای ظرف فلکس فشار داده میشوند.
- flex-end: ردیفهایی از بلوکها به انتهای ظرف انعطاف‌پذیر فشار داده میشوند
- مرکز: ردیف های بلوک در مرکز ظرف فلکس قرار دارند
- فاصله بین: اولین ردیف بلوک ها در ابتدای ظرف انعطاف پذیر قرار دارد، آخرین ردیف بلوک بلوک در انتهای آن است، تمام ردیف های دیگر به طور مساوی در فضای باقی مانده توزیع شده اند.
- فاصله در اطراف: ردیف های بلوک از ابتدا تا انتهای ظرف انعطاف پذیر به طور مساوی فاصله دارند و تمام فضای آزاد را به طور مساوی تقسیم می کنند.
- کش آمدن (مقدار پیش فرض): ردیف های بلوک ها کشیده شده اند تا تمام فضای موجود را اشغال کنند.
ویژگیهای CSS flex-wrap و align-content باید مستقیماً روی ظرف انعطاف‌پذیر اعمال شوند، نه برای فرزندان آن.
نمایش مشخصات چند خطی در flex
قوانین CSS برای عناصر فرزند یک ظرف انعطاف پذیر (بلوک های فلکس)
flex-basis - اندازه پایه یک بلوک فلکس منفرد
اندازه محور اصلی اولیه را برای یک جعبه انعطاف پذیر قبل از اعمال تبدیل های مبتنی بر سایر فاکتورهای انعطاف پذیر بر روی آن تنظیم می کند. را می توان در هر واحد طول (px، em، ٪، ...) یا خودکار (پیش فرض) تنظیم کرد. اگر روی خودکار تنظیم شود، ابعاد بلوک (عرض، ارتفاع) به عنوان پایه در نظر گرفته می شود، که به نوبه خود ممکن است به اندازه محتوا بستگی داشته باشد، اگر به طور صریح مشخص نشده باشد.
flex-grow - "طمع" یک بلوک منعطف
تعیین می‌کند که در صورت نیاز، یک جعبه انعطاف‌پذیر منفرد چقدر میتواند بزرگتر از اقلام مجاور باشد. flex-grow یک مقدار بدون بعد می گیرد (پیش فرض 0)
مثال 1:
- اگر همه جعبههای فلکس داخل ظرف فلکس دارای flex-grow:1 باشند، آنگاه اندازه آنها یکسان خواهد بود.
- اگر یکی از آنها flex-grow:2 داشته باشد، 2 برابر بزرگتر از بقیه خواهد بود
مثال 2:
- اگر همه جعبههای فلکس داخل ظرف فلکس دارای flex-grow:3 باشند، آنگاه اندازه آنها یکسان خواهد بود.
- اگر یکی از آنها flex-grow:12 داشته باشد، 4 برابر بزرگتر از بقیه خواهد بود
یعنی قدر مطلق flex-grow عرض دقیق را تعیین نمی کند. درجه "طمع" خود را در رابطه با سایر بلوک های انعطاف پذیر در همان سطح تعیین می کند.
flex-shrink - ضریب "تراکم پذیری" یک بلوک فلکس منفرد
تعیین می کند که اگر فضای خالی کافی وجود نداشته باشد، جعبه فلکس نسبت به اقلام مجاور داخل ظرف فلکس چقدر کوچک می شود. پیش فرض 1 است.
flex - مختصری برای خواص فلکس-grow، flex-shrink و flex-base
flex: هیچ | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
css
/* یعنی ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex based: 30em; ) /* این همان ... */ .my-flex-block( flex : 12 3 30 صبح؛ )نسخه ی نمایشی برای رشد انعطاف پذیر، انعطاف پذیری کوچک و فلکس پایه
align-self - هم ترازی یک بلوک انعطاف پذیر منفرد در امتداد محور عرضی.
نادیده گرفتن ویژگی align-item یک ظرف انعطاف پذیر برای یک جعبه انعطاف پذیر منفرد را ممکن می کند.
مقادیر موجود تراز خود (همان 5 گزینه برای تراز کردن آیتم ها)
- flex-start: جعبه انعطاف پذیر به سمت شروع محور متقاطع رانده می شود
- flex-end: جعبه انعطاف پذیر به انتهای محور متقاطع فشار داده می شود
- مرکز: جعبه انعطاف پذیر در مرکز محور متقاطع قرار می گیرد
- خط پایه: جعبه انعطاف پذیر با خط پایه تراز شده است
- کش آمدن (مقدار پیش فرض): جعبه انعطاف پذیر کشیده می شود تا تمام فضای موجود در محور متقاطع را اشغال کند، در صورت وجود، حداقل عرض / حداکثر عرض در نظر گرفته می شود.
سفارش - ترتیب یک بلوک فلکس منفرد در داخل ظرف فلکس.
بهطور پیشفرض، همه بلوکها به ترتیبی که در html داده شده است، به دنبال یکدیگر میآیند. با این حال، این ترتیب را می توان با استفاده از ویژگی order تغییر داد. به عنوان یک عدد صحیح مشخص می شود و به طور پیش فرض 0 است.
مقدار سفارش موقعیت مطلق عنصر را در دنباله مشخص نمی کند. وزن موقعیت عنصر را تعیین می کند.
HTML
در این حالت، بلوک ها به ترتیب زیر در امتداد محور اصلی از یکدیگر پیروی می کنند: آیتم 5، آیتم 1، آیتم 3، آیتم 4، آیتم 2
نسخه ی نمایشی برای تراز خود و نظم
حاشیه: خودکار به صورت عمودی. رویاها به حقیقت می پیوندند!
Flexbox را می توان حداقل به این دلیل دوست داشت که تراز افقی برای همه از طریق حاشیه آشنا است: خودکار در اینجا برای عمودی نیز کار می کند!
My-flex-container (نمایش: flex; ارتفاع: 300px; /* یا هر چیزی */) .my-flex-block (عرض: 100px؛ /* یا هر چیزی */ ارتفاع: 100px؛ /* یا هر چیزی * / حاشیه: خودکار؛ /* جادویی! کادر به صورت عمودی و افقی در مرکز قرار گرفته است! */ )
چیز هایی برای به یاد آوردن
- در جاهایی که نیازی ندارید نباید از فلکس باکس استفاده کنید.
- هنوز هم مفید است که تعریف مناطق و ترتیب مجدد محتوا به ساختار صفحه در بسیاری از موارد وابسته باشد. به آن فکر کنید.
- فلکس باکس را بدانید و اصول اولیه را بدانید. این امر دستیابی به نتیجه مورد انتظار را بسیار آسان تر می کند.
- حواشی را فراموش نکنید. آنها هنگام تنظیم تراز محوری در نظر گرفته می شوند. همچنین مهم است که به یاد داشته باشید که حاشیه های flexbox مانند جریان معمولی "در هم نمی ریزند".
- ارزش شناور بلوک های فلکس در نظر گرفته نمی شود و اهمیتی ندارد. این احتمالاً می تواند به نحوی برای تخریب زیبا هنگام تغییر به فلکس باکس استفاده شود.
- flexbox برای چیدمان اجزای وب و بخشهای جداگانه صفحات وب بسیار مناسب است، اما هنگام چیدمان طرح‌بندی‌های اولیه (موقعیت مقاله، سرصفحه، پاورقی، نوار ناوبری و غیره) عملکرد خوبی نداشت. این هنوز یک موضوع بحث برانگیز است، اما این مقاله کاستی ها را نسبتاً قانع کننده نشان می دهد xanthir.com/blog/b4580
سرانجام
من فکر می کنم که فلکس باکس، البته، جایگزین همه روش های چیدمان دیگر نخواهد شد، اما، البته، در آینده نزدیک هنگام حل تعداد زیادی کار، جایگاه ارزشمندی را اشغال خواهد کرد. و مطمئناً، باید سعی کنید اکنون با او کار کنید. یکی از مقالات زیر به نمونه های خاصی از کار با flex-layout اختصاص داده خواهد شد. مشترک شدن در اخبار؛)
ویژگی align-content نوع هم ترازی خطوط را در داخل محفظه انعطاف پذیر در امتداد محور عرضی زمانی که فضای خالی وجود دارد، تعیین می کند.
اعمال می شود: ظرف فلکس.
مقدار پیش فرض: کش آمدن.
خطوط Flex-start در ابتدای محور متقاطع قرار دارند. هر خط بعدی با خط قبلی همسطح می شود. خطوط flex-end از انتهای محور متقاطع شروع می شوند. هر خط قبلی با خط بعدی همسطح می شود. مرکز خطوط در مرکز ظرف قرار می گیرند. فاصله بین خطوط به طور مساوی در ظرف توزیع شده و فاصله بین آنها یکسان است. فضای اطراف خطوط به طور مساوی توزیع می شوند به طوری که فضای بین دو خط مجاور یکسان باشد. فضای سفید قبل از خط اول و بعد از آخرین خط برابر با نصف فضای بین دو خط مجاور است. فاصله یکنواخت ردیف ها به طور مساوی توزیع می شوند. فضای سفید قبل از خط اول و بعد از خط آخر به اندازه خطوط دیگر است. خطوط کششی به طور مساوی کشیده می شوند تا فضای آزاد را پر کنند.
ویژگی align-content خطوط یک کانتینر flex را در داخل محفظه flex زمانی که فضای اضافی در محور متقاطع وجود دارد تراز می‌کند، مشابه اینکه justify-content آیتمهای فردی را در محور اصلی تراز می‌کند. توجه داشته باشید که این خاصیت هیچ تاثیری روی ظرف فلکس تک خطی ندارد. ارزش ها معانی زیر را دارند:
توجه: فقط کانتینرهای انعطاف پذیر چند خطی همیشه فضای خالی در محور متقاطع برای تراز کردن خطوط دارند، زیرا در کانتینر فلکس تک خطی خط تنها به طور خودکار کشیده می شود تا فضا را پر کند.
اعمال می شود: ظروف فلکس.
اولیه: کش آمدن.
خطوط شروع فلکس به سمت شروع ظرف فلکس بسته بندی می شوند. لبه استارت متقاطع خط اول در ظرف فلکس هم تراز با لبه استارت متقاطع ظرف فلکس قرار می گیرد و هر خط بعدی هم تراز با خط قبل قرار می گیرد. خطوط flex-end به سمت انتهای ظرف فلکس بسته بندی می شوند. لبه متقاطع آخرین خط هم تراز با لبه انتهایی ظرف فلکس قرار می گیرد و هر خط قبلی هم تراز با خط بعدی قرار می گیرد. مرکز خطوط به سمت مرکز ظرف انعطاف پذیر بسته بندی شده اند. خطوط در ظرف فلکس هم تراز با یکدیگر قرار می گیرند و در مرکز ظرف فلکس قرار می گیرند، با مقادیر مساوی فاصله بین لبه محتوای متقاطع ظرف فلکس و اولین خط در ظرف فلکس، و بین لبه محتوای متقاطع ظرف فلکس و آخرین خط در ظرف فلکس. (اگر فضای خالی باقیمانده منفی باشد، خطوط به طور مساوی در هر دو جهت سرریز می شوند.) فاصله بین خطوط به طور مساوی در ظرف انعطاف پذیر توزیع شده است. اگر فضای خالی باقیمانده منفی باشد، این مقدار با فلکس استارت یکسان است. در غیر این صورت، لبه شروع متقاطع خط اول در ظرف فلکس هم تراز با لبه محتوای استارت متقاطع ظرف فلکس قرار می گیرد، لبه متقاطع آخرین خط در ظرف فلکس هم تراز با لبه متقاطع ظرف فلکس قرار می گیرد. لبه محتوای انتهایی ظرف فلکس، و خطوط باقیمانده در ظرف انعطاف پذیر به گونه ای توزیع شده اند که فاصله بین هر دو خط مجاور یکسان باشد. خطوط به صورت فاصله در اطراف به طور مساوی در ظرف انعطاف پذیر با فاصله های نیم اندازه در دو طرف توزیع شده اند. اگر فضای آزاد باقیمانده منفی باشد، این مقدار با مرکز یکسان است. در غیر این صورت، خطوط در ظرف فلکس به گونه ای توزیع می شوند که فاصله بین هر دو خط مجاور یکسان باشد و فاصله بین خطوط اول/آخر و لبه های ظرف فلکس نصف اندازه فاصله بین خطوط فلکس باشد. فضا به طور مساوی خطوط به طور مساوی در ظرف انعطاف پذیر توزیع شده اند. اگر فضای آزاد باقیمانده منفی باشد، این مقدار با مرکز یکسان است. در غیر این صورت، خطوط در ظرف فلکس به گونه ای توزیع می شوند که فاصله بین هر خط فلکس یکسان باشد. خطوط کششی کشیده می شوند تا فضای باقیمانده را اشغال کنند. اگر فضای خالی باقیمانده منفی باشد، این مقدار با فلکس استارت یکسان است. در غیر این صورت، فضای آزاد به طور مساوی بین تمام خطوط تقسیم می شود و اندازه متقاطع آنها افزایش می یابد.