CSS Flex بین عناصر. هماهنگ کردن بلوک های CSS با استفاده از کانتینر فلکس

CSS Flexbox (ماژول طرح بندی جعبه انعطاف پذیر) - ماژول طرح کانتینر انعطاف پذیر یک روش عناصر تخمگذار است، اساس محور مبتنی بر است.

Flexbox شامل خارج است مخزن انعطاف پذیر (کانتینر فلکس) و اقلام انعطاف پذیر (آیتم های فلکس). عناصر انعطاف پذیر را می توان به رشته یا ستون ساخته شده، و فضای آزاد باقی مانده بین آنها به روش های مختلف توزیع می شود.

ماژول Flexbox به شما امکان می دهد تا وظایف زیر را حل کنید:

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

Flexbox Tasks خاص را حل می کند - ایجاد طرح های یک بعدی، به عنوان مثال، پانل ناوبری، از آنجا که عناصر Flex را می توان تنها بر روی یکی از محورها قرار داد.

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

Flexbox چیست؟

مرورگرهای پشتیبانی

یعنی: 11.0، 10.0 -ms-
فایرفاکس: 28.0، 18.0 -moz-
کروم: 29.0، 21.0 -Webkit-
صفری: 6.1 -Webkit-
اپرا: 12.1 -Webkit
iOS Safari: 7.0 -Webkit-
اپرا مینی: 8
مرورگر آندروید: 4.4، 4.1 -Webkit-
کروم برای آندروید: 44

1. مفاهیم پایه

شکل. 1. مدل Flexbox

برای توصیف ماژول Flexbox، یک مجموعه خاص از اصطلاحات استفاده می شود. مقدار جریان انعطاف پذیر و حالت ضبط مکاتبات این اصطلاحات را به جهت های فیزیکی تعیین می کند: بالا / راست / پایین / چپ، محورها: عمودی / افقی و اندازه: عرض / ارتفاع.

محور اصلی - محور که در آن عناصر فلکس قرار داده می شود. این عمدتا اندازه گیری می شود.

شروع اصلی و پایان اصلی - خطوطی که قسمت اولیه و نهایی کانتینر فلکس را تعریف می کنند، نسبی که عناصر فلکس را از بین می برند (از شروع اصلی به سمت انتهای اصلی شروع می شود).

اندازه اصلی) - عرض یا ارتفاع ظرفیت انعطاف پذیر یا عناصر فلکس، بسته به این واقعیت که آنها به طور عمده اندازه گیری می شوند، اندازه اصلی کانتینر فلکس یا عنصر فلکس را تعیین می کنند.

محور صلیب - محور عمود بر محور اصلی. آن را در ابعاد عرضی گسترش می دهد.

صلیب شروع و پایان متقابل - خطوطی که قسمت اولیه و نهایی محور عرضی را تعریف می کنند نسبت به آن عناصر فلکس را از بین می برند.

اندازه صلیب) - عرض یا ارتفاع عناصر انعطاف پذیر یا انعطاف پذیری، بسته به آنچه در ابعاد عرضی است، اندازه عرضی آنها است.

شکل. 2. حالت ردیف و ستون

2. انعطاف پذیر

Flex Container یک متن جدید قالب بندی انعطاف پذیر را برای محتویات آن تنظیم می کند. ظروف فلکس مخزن بلوک نیست، بنابراین خواص CSS مانند شناور، روشن، عمودی، برای عناصر کودک کار نمی کند. همچنین، ظروف فلکس بر خواص ستون- * تاثیر نمی گذارد، ایجاد سخنرانان در متن و شبه عناصر :: خط اول و :: اولین حرف.

مدل نشانه گذاری Flexbox با ارزش مشخصی از ویژگی CSS از صفحه نمایش عنصر HTML پدر و مادر حاوی بلوک های زیر انتخاب شده در داخل خود همراه است. برای کنترل عناصر با استفاده از این مدل، باید اموال صفحه نمایش را به صورت زیر تنظیم کنید:

Flex-container (/ * تولید بلوک انعطاف پذیر فلکس * / صفحه نمایش: -webkit-flex؛ صفحه نمایش: Flex؛) .Flex-container (/ * ایجاد یک رشته رشته فلاش - صفحه نمایش * / صفحه نمایش: -webkit-inline-flex ؛ صفحه نمایش: inline-flex؛)

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

شکل. 3. عناصر هماهنگ در مدل Flexbox

اگر بلوک پدر و مادر حاوی متن یا تصاویر بدون بسته بندی، آنها تبدیل به عناصر انعطاف پذیر ناشناس. متن بر روی لبه بالا بلوک کانتینر قرار دارد و ارتفاع تصویر برابر با ارتفاع بلوک برابر است، I.E. تغییر شکل یافته است.

3. عناصر انعطاف پذیر

Flex-lements - بلوک های نشان دهنده محتویات مخزن انعطاف پذیر در جریان است. کانتینر فلکس یک زمینه قالب بندی جدید را برای محتویات آن ایجاد می کند که ویژگی های زیر را ایجاد می کند:

برای عناصر فلکس، ارزش آنها از اموال صفحه نمایش مسدود شده است. ارزش نمایش: بلوک درون خطی؛ و صفحه نمایش: سلول جدول؛ محاسبه شده در صفحه نمایش: بلوک؛ .
فضای خالی بین عناصر ناپدید می شود: آن را تبدیل به عنصر فلکس خود نمی شود، حتی اگر متن inter-election در یک عنصر انعطاف پذیر ناشناس پیچیده شود. برای محتویات یک عنصر انعطاف پذیر ناشناس، سبک های خود را تنظیم نمیکند، اما آنها را به ارث برده اند (به عنوان مثال، پارامترهای فونت) از کانتینر فلکس.
عنصر انعطاف پذیر مطلقا موقعیت در طرح طرح شرکت نمی کند.
زمینه های حاشیه ای عناصر انعطاف پذیر مجاور سقوط نمی کنند.
درصد درصد حاشیه و پودر از اندازه داخلی بلوک حاوی آنها محاسبه می شود.
حاشیه: خودکار؛ گسترش، جذب فضای اضافی در اندازه گیری مناسب. آنها می توانند مورد استفاده قرار گیرند تا عناصر انعطاف پذیر مجاور را به هم متصل کنند یا گسترش دهند.
حداقل اندازه خودکار عناصر فلکس به طور پیش فرض حداقل اندازه محتوای آن است، یعنی Min-Width: Auto؛ . برای ظروف پیمایش، حداقل اندازه خودکار معمولا صفر است.

4. عناصر انعطاف پذیر و جهت گیری

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

4.1. جهت محور اصلی: جهت فلکس

اموال متعلق به کانتینر فلکس است. جهت محور اصلی را مدیریت می کند، در حالی که عناصر فلکس مطابق با حالت ضبط فعلی انباشته می شوند. به ارث برده نمی شود

جهت فلکس
ارزش های:
ردیف	مقدار پیش فرض از چپ به راست (در RTL به سمت راست سمت چپ). عناصر فلکس در رشته قرار می گیرند. آغاز (اصلی شروع) و پایان (اصلی پایان) جهت محور اصلی، به ابتدا (شروع درون خطی) و پایان (درون خطی) محور درون خطی (محور درون خطی) مطابقت دارد.
ردیف معکوس	جهت به سمت راست سمت راست (در RTL چپ به راست). عناصر فلکس در رشته نسبت به لبه سمت راست کانتینر (در RTL - LEFT) قرار می گیرند.
ستون	جهت از بالا به پایین. عناصر فلکس در ستون گذاشته می شوند.
ستون معکوس	ستون با عناصر در جهت معکوس، پایین به بالا.
اولیه
به ارث می برند.

شکل. 4. اموال Flex-Direction برای زبان های چپ به راست

نحو

Flex-container (صفحه نمایش: -Webkit-Flex؛ -Webkit-Flex-Direction: Row-Reverse؛ صفحه نمایش: Flex؛ جهت فلکس: ردیف معکوس؛)

4.2. مدیریت کانتینر Multi-Flex: Flex-Wrap

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

به طور پیش فرض، عناصر Flex در یک خط در امتداد محور اصلی انباشته می شوند. هنگامی که سرریز، آنها فراتر از محدوده محدود کانتینر Flex هستند. اموال به ارث برده نمی شود.

شکل. 5. مدیریت چند جریان با استفاده از خواص Flex-Wrap برای زبان های LTR

نحو

Flex-container (نمایش: -webkit-flex؛ -Webkit-flex-wrap: wrap؛ صفحه نمایش: Flex؛ Flex-Wrap: Wrap؛)

4.3. خلاصه ای از جهت و چند مرحله ای: Flex-Flow

اموال به شما امکان می دهد دستورالعمل های محورهای اصلی و عرضی را تعیین کنید، و همچنین امکان انتقال عناصر انعطاف پذیر در صورت لزوم برای چندین خط. این یک ضبط اختصار از خواص Flex-Direction و Flex-Wrap است. مقدار پیش فرض Flex-Flow: ROW NOWRAP؛ . اموال به ارث برده نمی شود.

نحو

Flex-container (نمایش: -webkit-flex؛ -webkit-flex-flow: wrap ردیف؛ صفحه نمایش: Flex؛ Flex-Flow: Row Wrap؛)

4.4. صفحه نمایش عنصر انعکاس: سفارش

اموال مرتبه را تعیین می کند که عناصر Flex نمایش داده می شوند و در داخل ظروف فلکس قرار می گیرند. به عناصر انعطاف پذیر اعمال می شود. اموال به ارث برده نمی شود.

در ابتدا، تمام عناصر فلکس سفارش دارند: 0؛ . هنگام تعیین مقدار از -1 برای عنصر، آن را به ابتدای زمان حرکت می دهد، ارزش 1 - تا پایان. اگر چندین عنصر انعطاف پذیر دارای مقدار سفارش یکسان باشند، آنها مطابق با سفارش اصلی نمایش داده می شوند.

نحو

Flex-container (نمایش: -webkit-flex؛ صفحه نمایش: Flex؛) .Flex-Item (-Webkit-Order: 1؛ سفارش: 1؛)
شکل. 6. عناصر انعطاف پذیر عناصر

5. عناصر انعطاف پذیر انعطاف پذیر

جنبه تعیین کننده طرح انعطاف پذیر، توانایی "خم شدن" عناصر انعطاف پذیر، تغییر عرض / ارتفاع آنها (بسته به اینکه اندازه آن بر روی محور اصلی قرار دارد) برای پر کردن فضای موجود در ابعاد اصلی است. این کار با استفاده از اموال فلکس انجام می شود. مخزن فلکس فضای آزاد را بین عناصر کودک خود (نسبت به ضریب انعطاف پذیری آنها) توزیع می کند تا ظرف را پر کند یا آنها را فشرده کند (نسبت به ضریب انعطاف پذیری انعطاف پذیر) برای جلوگیری از سرریز.

عنصر فلکس به طور کامل "انعطاف پذیر" خواهد بود اگر مقادیر انعطاف پذیری و انعطاف پذیری آن صفر باشد، و "انعطاف پذیر" در غیر این صورت.

5.1. مجموعه ای از اندازه های انعطاف پذیر با یک ویژگی: Flex

اموال یک رکورد اختصار از خواص فلکس رشد، رشد انعطاف پذیر و انعطاف پذیر است. مقدار پیش فرض: فلکس: 0 1 خودکار؛ . شما می توانید هر دو و هر سه ویژگی را مشخص کنید. اموال به ارث برده نمی شود.

نحو

Flex-container (صفحه نمایش: -webkit-flex؛ صفحه نمایش: Flex؛) .Flex-Item (-Webkit-Flex: 3 1 100px؛ -MS-FLEX: 3 1 100px؛ فلکس: 3 1 100px؛)

5.2. ضریب رشد: انعطاف پذیری رشد

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

شکل. 7. مدیریت فضای آزاد در قسمت ناوبری با استفاده از انعطاف پذیری

نحو

Flex-container (نمایش: -webkit-flex؛ صفحه نمایش: Flex؛) .Flex-Item (-Webkit-Flex-Grow: 3؛ Flex-Grow: 3؛)

5.3. نسبت فشرده سازی: انعطاف پذیری

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

شکل. 8. محدود کردن عناصر انعطاف پذیر در رشته

نحو

Flex-container (صفحه نمایش: -Webkit-flex؛ صفحه نمایش: Flex؛) .Flex-Item (-WebKit-Flex-Shrink: 3؛ \u200b\u200bFlex-Shrink: 3؛)

5.4. اندازه پایه: فلسفر پایه

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

نحو

Flex-container (صفحه نمایش: -Webkit-Flex؛ صفحه نمایش: Flex؛) .Flex-Item (-WebKit-Flex-Base: 100px؛ Flex-Base: 100px؛)

6. هماهنگی

6.1 هماهنگی در محور اصلی: توجیه محتوا

اموال عناصر فلکس را در امتداد محور اصلی کانتینر انعطاف پذیر قرار می دهد، توزیع فضای آزاد، که توسط عناصر فلکس غیرقانونی است. هنگامی که آیتم به یک ظرف انعطاف پذیر تبدیل می شود، عناصر Flex پیش فرض با هم گروه بندی می شوند (اگر میدان حاشیه مشخص نشده باشد). پس از محاسبه مقادیر حاشیه و انعطاف پذیری، شکاف ها اضافه می شوند. اگر هر عنصر دارای مقدار غیر صفر از انعطاف پذیری یا حاشیه: خودکار؛ اموال هیچ نفوذی ندارد اموال به ارث برده نمی شود.


ارزش های:
Flex-Start	مقدار پیش فرض عناصر فلکس در جهت خروج از خط اولیه کانتینر فلکس قرار می گیرند.
انعطاف پذیری	عناصر Flex-Elements در جهت خروج از خط نهایی کانتینر فلکس قرار می گیرند.
مرکز	عناصر انعطاف پذیر در مرکز کانتینر فلکس قرار می گیرند.
فاصله بین	عناصر انعطاف پذیر به طور یکنواخت بر روی خط توزیع می شوند. اولین عنصر فلکس در لبه خط اولیه قرار می گیرد، آخرین عنصر Flex، با لبه خط نهایی قرار می گیرد و عناصر انعطاف پذیر باقی مانده در خط توزیع می شوند تا فاصله بین هر دو عنصر مجاور باشد همان. اگر فضای آزاد باقی مانده منفی باشد یا در رشته تنها یک عنصر انعطاف پذیر وجود دارد، این مقدار با پارامتر شروع Flex-Start یکسان است.
فضای اطراف	عناصر فلکس بر روی خطوط توزیع می شوند به طوری که فاصله بین هر دو عنصر انعطاف پذیر مجاور یکسان است، و فاصله بین عناصر Flex اول / آخر و لبه های کانتینر فلکس از فاصله بین عناصر فلکس متغیر بود.
اولیه	مقدار اموال پیش فرض را تنظیم می کند.
به ارث می برند.	ارزش اموال از عنصر والدین را به ارث می برد.

شکل. 9. تراز کردن عناصر و توزیع فضای آزاد با استفاده از خواص توجیه محتوا

نحو

Flex-container (نمایش: -webkit-flex؛ -webkit-justify content: flex-start؛ صفحه نمایش: Flex؛ توجیه محتوا: Flex-Start؛)

6.2 محور عرضی را هماهنگ کنید: align-items و talign-self

عناصر انعطاف پذیر را می توان بر روی محور عرضی خط فعلی کانتینر انعطاف پذیر قرار داد. align-items تنظیم هم ترازی برای تمام عناصر فکس کانتینر، از جمله عناصر انعطاف پذیر ناشناس. Helign-Self به شما این امکان را می دهد که این هماهنگی را برای عناصر انعطاف پذیری فرد لغو کنید. اگر هر یک از عنصر انعطاف پذیری حاشیه عرصه اتوماتیک باشد، هماهنگ کردن خود هیچ تاثیری ندارد.

6.2.1 align-items

اموال عناصر Flex را شامل می شود، از جمله عناصر انعطاف پذیر ناشناس در محور عرضی. به ارث برده نمی شود


ارزش های:
Flex-Start
انعطاف پذیری
مرکز
پایه	خطوط اساسی تمام عناصر فلکس درگیر در هماهنگی همزمان هستند.
کش آمدن.
اولیه	مقدار اموال پیش فرض را تنظیم می کند.
به ارث می برند.	ارزش اموال از عنصر والدین را به ارث می برد.

شکل. 10. تراز کردن عناصر در یک ظرف عمودی

نحو

Flex-container (صفحه نمایش: -webkit-flex؛ -webkit-align-items: Flex-Start؛ صفحه نمایش: Flex؛ Align-Items: Flex-Start؛)

6.2.2 هماهنگ کردن خود

اموال مسئول هماهنگی یک عنصر جداگانه جداگانه در ارتفاع کانتینر انعطاف پذیر است. ترتیب هماهنگی مشخص شده توسط align-items را لغو می کند. به ارث برده نمی شود


ارزش های:
خودکار.	مقدار پیش فرض عنصر Flex با استفاده از هماهنگی مشخص شده در خواص انعطاف پذیر انعطاف پذیر
Flex-Start	لبه بالای عنصر فلکس با خط Flex (یا در فاصله، با توجه به میدان های حاشیه مشخص شده و چارچوب مرزی عنصر) عبور می کند که از طریق آغاز محور عرضی عبور می کند.
انعطاف پذیری	لبه پایین تر از عنصر فلکس با خط Flex (یا در فاصله، با توجه به میدان های حاشیه مشخص شده و چارچوب مرزی عنصر) عبور می کند که از انتهای محور عرضی عبور می کند.
مرکز	زمینه های Element Flex بر روی محور عرضی در خط Flex متمرکز شده اند.
پایه	عنصر فلکس با پایه تراز شده است.
کش آمدن.	اگر اندازه عرضی عنصر فلکس به عنوان خودکار محاسبه شود و هیچ یک از مقادیر عرضی حاشیه به وسیله خودکار برابر نیست، عنصر کشش است. مقدار پیش فرض
اولیه	مقدار اموال پیش فرض را تنظیم می کند.
به ارث می برند.	ارزش اموال از عنصر والدین را به ارث می برد.

شکل. 11. هماهنگی عناصر انعطاف پذیر فردی

نحو

Flex-container (نمایش: -webkit-flex؛ صفحه نمایش: Flex؛) .Flex-Item (-Webkit-align-self: center؛ align-self: center؛)

6.3. خطوط کانتینر انعطاف پذیر: تراز کردن محتوا

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


ارزش های:
Flex-Start	ردیف ها به سمت شروع ظروف فلکس ذخیره می شوند. لبه خط اول نزدیک به لبه کانتینر انعطاف پذیر قرار دارد، هر کدام پس از آن نزدیک به خط قبلی است.
انعطاف پذیری	ردیف ها به سمت انتهای کانتینر فلکس قرار می گیرند. لبه آخرین ردیف نزدیک به لبه کانتینر انعطاف پذیر است، هر یک از قبلی - نزدیک به ردیف بعدی.
مرکز	ردیف ها به سمت مرکز کانتینر فلکس ذخیره می شوند. ردیف ها نزدیک به یکدیگر قرار دارند و در مرکز کانتینر انعطاف پذیر با فاصله ای برابر بین لبه اولیه محتویات کانتینر فلکس و رشته اول و بین لبه نهایی محتویات کانتینر فلکس قرار می گیرند رشته آخر
فاصله بین	ردیف ها یکنواخت در ظرف انعطاف پذیر توزیع می شوند. اگر فضای آزاد باقی مانده منفی باشد یا ظرف انعطاف پذیر تنها یک خط انعطاف پذیر داشته باشد، این مقدار با انعطاف پذیری یکسان است. در غیر این صورت، لبه خط اول نزدیک به لبه اولیه محتویات کانتینر انعطاف پذیر است، لبه آخرین ردیف نزدیک به لبه نهایی محتوای کانتینر Flex است. خطوط باقی مانده توزیع می شوند تا فاصله بین هر دو ردیف مجاور یکسان باشد.
فضای اطراف	ردیف ها یکنواخت در ظرف انعطاف پذیر با فضای نیمه در هر دو طرف توزیع می شوند. اگر فضای آزاد باقی مانده منفی باشد، این مقدار با مرکز مرکز یکسان است. در غیر این صورت، رشته ها به گونه ای توزیع می شوند که فاصله بین هر دو ردیف مجاور یکسان است، و فاصله بین ردیف اول / آخرین و لبه های محتویات کانتینر فلکس از فاصله بین خطوط متغیر است.
کش آمدن.	مقدار پیش فرض ردیف عناصر فلکس به طور مساوی کشیده شده است، تمام فضای موجود را پر می کند. اگر فضای آزاد باقی مانده منفی باشد، این مقدار با انعطاف پذیری یکسان است. در غیر این صورت، فضای آزاد به طور مساوی بین تمام ردیف ها تقسیم می شود و اندازه عرضی آنها را افزایش می دهد.
اولیه	مقدار اموال پیش فرض را تنظیم می کند.
به ارث می برند.	ارزش اموال از عنصر والدین را به ارث می برد.

شکل. 12. تراز چند خط از عناصر فلکس

نحو

Flex-container (نمایش: -Webkit-Flex؛ -Webkit-Flex-Flow: Webkit-Flex-Flow: Webkit-align-content: Flex-end؛ صفحه نمایش: Flex؛ Flex-Flow: Row Wrap؛ Align-Content: Flex-End ؛ ارتفاع: 100px؛)

ماژول طرح بندی Flexbox (جعبه انعطاف پذیر) با هدف ارائه بیش از روش موثر محل، تراز و توزیع فضای آزاد بین عناصر موجود در ظرف، حتی زمانی که اندازه آنها ناشناخته است و / یا پویا (بنابراین، کلمه "flex") ناشناخته است.

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

مهمترین چیز این است که Flexbox در مقایسه با طرح بندی های معمول (بلوک بر اساس موقعیت های عمودی و عناصر رشته بر اساس موقعیت افقی) یک آگنوستیک جهت دار است (بلوک های مبتنی بر موقعیت های عمودی و عناصر رشته ای بر اساس موقعیت افقی). علیرغم این واقعیت که آنها به اندازه کافی کار می کنند، آنها انعطاف پذیری برای پشتیبانی از برنامه های بزرگ یا پیچیده ای ندارند (به ویژه هنگامی که به تغییرات در جهت، تغییر اندازه، کشش، فشرده سازی، فشرده سازی و غیره تغییر می کند.

توجه داشته باشید. Flexbox مناسب تر برای اجزای برنامه کاربردی و طرح بندی های کوچک است، در حالی که شبکه CSS برای طرح بندی های بزرگتر طراحی شده است.

مبانی و اصطلاحات

از آنجا که Flexbox یک کل ماژول است، نه یک ملک جداگانه، شامل بسیاری از چیزهای مختلف، از جمله مجموعه ای از کل خواص. بعضی از آنها طراحی شده اند تا ظرف خود را نصب کنند (عنصر والدین شناخته شده به عنوان "مخزن فلکس")، در حالی که دیگران باید با عناصر کودک نصب شوند (به نام "عناصر فلکس") نصب می شوند.

اگر سیستم طرح بندی معمولی بر اساس دستورالعمل بلوک و رشته است، Flexbox بر اساس "Flex-Flow Flow" است. لطفا نگاهی به این نقاشی از مشخصات توضیح دهید که ایده اصلی Flexbox را توضیح دهید.

اساسا عناصر در کنار هم قرار می گیرند محور اصلی (از شروع اصلی به انتهای اصلی) یا محور صلیب (از متقاطع شروع به متقاطع).

مرورگرهای پشتیبانی

CSS ماژول طرح بندی جعبه انعطاف پذیر

کروم برای آندروید

Browser BlackBerry با شروع از 10 نسخه از یک نحو جدید پشتیبانی می کند.

خواص برای ظرف

خواص عناصر

خواص برای عنصر پدر و مادر (ظروف فلکس)

نمایش دادن

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

کانتینر (صفحه نمایش: flex؛ / * یا interline-flex * /)

لطفا توجه داشته باشید که ستون های CSS بر ظرف انعطاف پذیر تاثیر نمی گذارد.

جهت فلکس

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

کانتینر (جهت فلکس: ردیف | ردیف معکوس | ستون | ستون معکوس؛)

ردیف (به طور پیش فرض) - از چپ به راست در LTR؛ راست به سمت چپ در RTL؛
ردیف معکوس - راست به چپ در LTR؛ از چپ به راست در RTL؛
ستون - همان چیزی است که ردیف، فقط از بالا به پایین؛
ستون معکوس - همان چیزی است که ردیف معکوس است، فقط از پایین به بالا؛

انعطاف پذیر

به طور پیش فرض، اقلام سعی خواهد کرد فقط یک خط را پر کنید. شما می توانید این رفتار را تغییر دهید و موارد را به خط بعدی منتقل کنید، در صورت لزوم.

ظرف (بسته بندی Flex-wrap: Nowrap | بسته بندی | بسته بندی کن

nowRap (به طور پیش فرض) - تمام عناصر فلکس بر روی یک خط قرار می گیرند؛
بسته بندی کردن. - عناصر Flex در چندین خط قرار می گیرند، بالا پایین؛
بسته بندی معکوس - عناصر Flex در چندین خط، پایین به بالا قرار می گیرند؛

توجیه

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

کانتینر (توجیه محتوا: Flex-Start | Flex-End | مرکز | فضا-بین | فضا در اطراف؛)

flex-Start (به طور پیش فرض) - عناصر به ابتدای خط فشار داده می شوند؛
انعطاف پذیری - عناصر به سمت انتهای رشته فشار داده می شوند؛
مرکز - عناصر در مرکز در امتداد رشته قرار دارند؛
فاصله بین - عناصر به طور مساوی بر روی خط قرار می گیرند؛ اولین عنصر در ابتدای خط است آخرین عنصر واقع در انتهای خط؛
فضای اطراف - عناصر به طور مساوی بر روی خط با همان فضای نزدیک آنها قرار می گیرند. لطفا توجه داشته باشید که فضای بصری یکسان نیست، زیرا تمام عناصر دارای فضای مشابه در هر دو طرف هستند. عنصر اول یک واحد فضا را از طرف کانتینر، اما دو واحد بین آن و عنصر بعدی، به دلیل عنصر بعدی نیز دارای یک واحد از دو طرف است.

align-items

این ویژگی رفتار عناصر فلکس را در امتداد محور عرضی در خط فعلی تعیین می کند. از آن به عنوان O، فقط برای محور عرضی (محور اصلی عمود بر عمق) فکر کنید.

کانتینر (Align-Items: Flex-Start | Flex-end | مرکز | پایه | پایه؛)

flex-Start - عناصر در ابتدای محور عرضی قرار می گیرند؛
flex-end - عناصر در انتهای محور عرضی قرار می گیرند؛
مرکز - عناصر در مرکز محور عرضی قرار دارند؛
پایه - عناصر توسط پایه تراز می شوند؛
کشش (به طور پیش فرض) - کشش برای پر کردن کل ظرف (Min-width / max-width هنوز مشاهده شده است)؛

ترانه

توجه داشته باشید. این ویژگی کار نمی کند زمانی که تنها یک خط از عناصر فلکس وجود دارد.

flex-Start - ردیف ها در ابتدای ظرف قرار دارند؛
انعطاف پذیری - خطوط در انتهای ظرف قرار دارند؛
مرکز - ردیف ها در مرکز کانتینر قرار می گیرند؛
فاصله بین - ردیف ها به طور مساوی توزیع می شوند، اولین خط در ابتدای ظرف قرار دارد و آخرین خط در پایان؛
فضای اطراف - ردیف ها به طور مساوی توزیع می شوند همان فاصله بین آنها؛
کشش (به طور پیش فرض) - ردیف ها در سراسر عرض کشیده می شوند تا فضای باقی مانده را اشغال کنند؛

خواص برای شرکت های تابعه (عناصر فلکس)

سفارش

به طور پیش فرض، تمام عناصر در سفارش اصلی قرار دارند. با این حال، اموال سفارش مرتکب نظم می شود که عناصر داخل ظرف واقع شده اند.

مورد (سفارش: ; }

انعطاف پذیری

اموال توانایی افزایش عنصر را در اندازه، در صورت لزوم تعیین می کند. این مقدار بدون ابعاد به عنوان یک نسبت طول می کشد که تعیین می کند که مقدار فضای آزاد داخل ظرف باید عنصر را اشغال کند.

اگر تمام عناصر دارای یک اموال انعطاف پذیر هستند که در 1 نصب شده اند، فضای آزاد داخل ظرف به طور مساوی بین تمام عناصر توزیع می شود. اگر یکی از عناصر عناصر به 2 تنظیم شود، عنصر دو برابر فضای بیشتری از بقیه خواهد بود (حداقل سعی کنید).

مورد (Flex-grow: ؛ / * پیش فرض 0 * /)

نشان دادن اعداد منفی غیرممکن است.

پایه فلج

اندازه عنصر پیش فرض را قبل از توزیع فضای باقی مانده تعیین می کند. ممکن است طول (20٪، 5rem، و غیره) یا کلمه کلیدی. کلید واژه خودکار به معنی "شبیه به عرض یا اموال ارتفاع من" است. کلمه کلیدی محتوا به این معنی است که "اندازه بر اساس محتوای عنصر است" کلمه کلیدی هنوز به خوبی پشتیبانی نمی شود، بنابراین دشوار است که آن را بررسی کنید، و حتی دشوار است برای پیدا کردن آنچه که می تواند محتوای خود را، حداکثر محتوا و محتوای مناسب.

مورد (فلاش پایه: | خودکار؛ / * پیش فرض خودکار * /)

اگر به 0 تنظیم شود، فضای اضافی در اطراف محتوای مورد توجه قرار نخواهد گرفت. اگر شما را نصب کنید، فضای اضافی بر اساس ارزش توزیع می شود.

خمیدگی

این کاهش است، و. پارامترهای دوم و سوم (انعطاف پذیری کوچک و انعطاف پذیر) اجباری نیستند. مقدار پیش فرض به 0 1 خودکار تنظیم شده است.

مورد (فلکس: هیچ | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

هماهنگ کردن خود

این ملک به شما اجازه می دهد تا هماهنگی پیش فرض (یا مشخص شده با استفاده از اموال) را برای عناصر انعطاف پذیر فرد لغو کنید.

لطفا به توضیح خواص برای درک ارزش های موجود نگاه کنید.

لطفا توجه داشته باشید که شناور، روشن و عمودی، هیچ تاثیری بر عنصر فلکس ندارد.

مثال ها

بیا شروع کنیم با مثال سادهوظیفه تعیین کننده ای که تقریبا هر روز اتفاق می افتد: مرکز کامل. اگر از FlexBox استفاده می کنید، نمی توان آن را آسان تر کرد.

پدر و مادر (صفحه نمایش: فلکس، ارتفاع: 300 پیکسل؛) .Child (عرض: 100px؛ ارتفاع: 100px؛ حاشیه: خودکار؛)

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

حالا اجازه دهید از برخی خواص بیشتر استفاده کنیم. لیستی از 6 عنصر را در نظر بگیرید، همه با اندازه ثابت در شرایط زیبایی شناختی، اما آنها می توانند به صورت خودکار باشند. ما می خواهیم آنها را به طور مساوی در امتداد محور افقی توزیع کنیم و به طوری که هنگام تغییر اندازه مرورگر همه چیز به ترتیب (بدون درخواست رسانه ها) بود.

Flex-container (صفحه نمایش: Flex؛ Flex-Flow: Wrap Row؛ توجیه محتوا: فضای اطراف؛)

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

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

ناوبری (صفحه نمایش: Flex؛ Flex-Flow: ردیف ردیف؛ توجیه محتوا: Flex-End؛) media همه و (حداکثر عرض: 800px) (.navigation (توجیه محتوا: فضای اطراف؛)) media همه و (حداکثر عرض: 500px) (.Navigation (Flex-Direction: Column؛))

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

Wrapper (صفحه نمایش: Flex-Fless؛ Flex-Flow: Row Wrap؛) .Header، .Main، .Nav، .aside، .footer (Flex: 1 100٪؛) Media همه و (Min-Width: 600px) (.ASide (فلکس: 1 خودکار؛)) media همه و (min-width: 800px) (.main (flex: 2 0px؛) .ASide-1 (سفارش: 1؛) .main (سفارش: 2؛) .aside 2 (سفارش: 3؛) .footer (سفارش: 4؛))

خواص مرتبط

خطاهای

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

اموال سفارش، نظم را مدیریت می کند که در آن عناصر کودک در داخل ظروف فلکس ظاهر می شود. به طور پیش فرض، آنها به ترتیب در ابتدا به ظرف فلکس اضافه می شوند.

ارزش های

.flex آیتم (سفارش:<целое число>; }

عناصر Flex را می توان با استفاده از این ویژگی ساده بدون تغییر کد HTML مرتب کرد.

مقدار پیش فرض: 0.

انعطاف پذیری

این ویژگی ضریب رشد را تعیین می کند که تعیین می کند که عنصر فلکس نسبت به عناصر انعطاف پذیر باقی مانده در ظرف انعطاف پذیر، در هنگام توزیع یک فضای آزاد مثبت، افزایش می یابد.

ارزش های

.flex-item (Flex-grow:<число>; }

اگر تمام عناصر فلکس دارای همان ارزش انعطاف پذیری هستند، تمام عناصر اندازه مشابهی را در ظرف داشته باشند.

عنصر Flex دوم فضای بیشتری نسبت به اندازه دیگر عناصر فلکس دارد.

مقدار پیش فرض: 0.

انعطاف پذیر

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

ارزش های

.flex مورد (Flex-Shrink:<число>; }

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

مقدار پیش فرض: 1.

اعداد منفی غیر قابل قبول هستند

پایه فلج

این ویژگی معنای مشابهی را به عنوان خواص عرض و ارتفاع می گیرد و اندازه اصلی اصلی عنصر فلکس را تعریف می کند، قبل از اینکه فضای آزاد مطابق با ضرایب توزیع شود.

ارزش های

.flex-item (flex-base: auto |<ширина>; }

flex-base برای عنصر فلکس چهارم مشخص شده و اندازه اولیه آن را دیکته می کند.

مقدار پیش فرض: خودکار.

خمیدگی

این ویژگی کاهش خواص فلکس رشد، انعطاف پذیری و انعطاف پذیری است. محصول مقادیر دیگر نیز می تواند به صورت خودکار (1 1 خودکار) و هیچکدام (0 0 خودکار) نصب شود.

ارزش های

.flex-item (flex: none | auto | [

? || ]; }

مقدار پیش فرض: 0 1 خودکار.

W3C توصیه می کند با استفاده از ویژگی های فلکس اختصار، به جای خواص فردی، از آنجایی که Flex به درستی هر اجزای نامشخص را برای استفاده معمول تنظیم می کند، توصیه می شود.

هماهنگ کردن خود

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

ارزش های

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

مدول flexbox-leuauta (جعبه انعطاف پذیر - "بلوک انعطاف پذیر"، در این لحظه توصیه های نامزدی W3C) این کار را برای ارائه یک روش کارآمد تر برای ارائه، سطح بندی و توزیع فضای آزاد بین عناصر در ظرف، حتی زمانی که اندازه آنها ناشناخته است و / یا پویا (از این رو کلمه "انعطاف پذیر") را ارائه می دهد.

ایده اصلی Flex-Guard در ظرف با توانایی تغییر عرض / ارتفاع (و سفارش) عناصر آن برای بهترین پر کردن فضا (در بیشتر موارد - برای پشتیبانی از انواع نمایش ها و صفحه نمایش ها ) مخزن فلکس عناصر را برای پر کردن فضای آزاد گسترش می دهد یا آنها را فشرده می کند تا از مرز خارج شود.

مهمترین، Flexbox-Leiaut به جهت بستگی ندارد، در مقایسه با لنت های معمول (بلوک، به صورت عمودی، و عناصر درونی به صورت افقی). در حالی که Leiaut معمولی برای صفحات وب عالی است، برای پشتیبانی از برنامه های بزرگ یا پیچیده، انعطاف پذیری (بدون Canalybur) وجود ندارد (به ویژه هنگامی که آن را به تغییر جهت گیری صفحه نمایش، تغییر اندازه، کشش، فشرده سازی، فشرده سازی و غیره).

اظهار نظر: Flexbox-Leuaout برای قطعات کامپوزیتی از نرم افزار و Leuautics در مقیاس کوچک مناسب است، در حالی که شبکه برای مقیاس های بزرگ لایان مورد استفاده قرار می گیرد.

مبانی

زیرا Flexbox یک ماژول کامل است، و نه تنها یک ملک واحد، آن را ترکیب بسیاری از خواص. بعضی از آنها باید به کانتینر (عنصر والدین، به اصطلاح "اعمال شوند مخزن انعطاف پذیر)، در حالی که خواص دیگر به عناصر کودک اعمال می شود یا عناصر انعطاف پذیر.

اگر Leuaout معمولی بر اساس دستورالعمل های بلوک و عناصر درونی است، Flex-Liaut بر اساس "Flex-Flow Flow" است. این طرح را از مشخصات توضیح دهید که ایده اصلی Flex-Leuaitov را توضیح دهید.

اکثر عناصر نیز توزیع می شوند محور اصلی (از جانب شروع اصلی قبل از پایان اصلی) یا همراه محور عرضی (از جانب شروع متقابل قبل از متقاطع).

محور اصلی - محور اصلی که در آن عناصر انعطاف پذیر قرار دارند. توجه داشته باشید، لزوما افقی نیست، همه چیز بستگی به ویژگی Flex-Direction دارد (نگاه کنید به زیر).
شروع اصلی | پایان اصلی - عناصر فلکس در یک ظرف از موقعیت اصلی شروع به موقعیت اصلی قرار می گیرند.
اندازه اصلی - عرض یا ارتفاع عنصر فلکس بسته به مقدار اولیه انتخاب شده. ارزش اصلی می تواند هر دو عرض یا ارتفاع عنصر باشد.
محور صلیب - محور عرضی عمود بر اصل اصلی. جهت آن بستگی به جهت محور اصلی دارد.
شروع متقابل | متقاطع - ردیف های فلکس با عناصر پر می شوند و در یک ظرف از موقعیت متقابل شروع به موقعیت متقابل قرار می گیرند.
اندازه متقابل - عرض یا ارتفاع عنصر فلکس، بسته به اندازه ابعاد، برابر با این مقدار است. این ویژگی با عرض یا ارتفاع مورد بسته به اندازه ابعاد همخوانی دارد.

خواص

صفحه نمایش: Flex | inline-flex؛

آن را به آن اعمال می شود:

کانتینر فلکس (درون خطی یا بلوک، بسته به مقدار انتخاب شده) را تعیین می کند، زمینه فلکس را برای تمام فرزندان فوری آن متصل می کند.

صفحه نمایش: مقادیر دیگر | فلکس | inline-flex؛

یادت باشه:

ستون CSS با یک ظرف انعطاف پذیر کار نمی کند
شناور، واضح و عمودی با عناصر فلکس کار نمی کند