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

یکی از دلایلی که Flexbox به سرعت به نفع توسعه دهندگان وب بود، این است که برای اولین بار قابلیت های هماهنگی مناسب را به وب به ارمغان آورد. این هماهنگی عمودی مناسب را فعال کرد، بنابراین ما می توانیم به راحتی یک جعبه را به راحتی مرکز کنیم. در این راهنما، ما نگاهی دقیق به چگونگی انجام خواص هماهنگی و توجیه در Flexbox انجام خواهیم داد.

به مرکز جعبه ما ما از اموال align-items استفاده می کنیم تا آیتم های ما را در محور صلیب قرار دهیم، که در این مورد، محور بلوک به صورت عمودی است. ما از توجیه محتوا استفاده می کنیم تا آیتم را در محور اصلی تنظیم کنیم، که در این مورد محور درون خطی به صورت افقی اجرا می شود.

شما می توانید نگاهی به کد این مثال زیر را ببینید. اندازه کانتینر یا عنصر توت فرنگی را تغییر دهید و عنصر توپی همیشه باقی بماند.

خواص که هماهنگی را کنترل می کنند

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

توجیه محتوا - کنترل هماهنگی همه موارد در محور اصلی.
align-items - کنترل هماهنگی همه موارد در محور صلیب.
هماهنگ سازی خود - کنترل هماهنگی یک مورد انعطاف پذیر فردی در محور صلیب.
Align-content - شرح داده شده در مشخصات به عنوان "بسته بندی خطوط فلکس"؛ فضای بین خطوط فلکس بر روی محور صلیب را کنترل می کند.

ما همچنین کشف می کنیم که چگونه حاشیه های خودکار را می توان برای هماهنگی در FlexBox استفاده کرد.

توجه داشته باشید.: خواص هم ترازی در Flexbox به مشخصات خود منتقل شده اند - سطح تراز بندی جعبه CSS 3. انتظار می رود که این مشخصات در نهایت خواص را به عنوان تعریف شده در سطح flexbox تعریف کند.

محور صلیب

آیتم های align-provides align-self Properties تراز کردن اقلام انعطاف پذیر ما را در محور صلیب، پایین ستون ها در صورت فلکس جهت ردیف و در کنار ردیف اگر جهت Flex-Direction ستون باشد.

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

اقلام تبدیل به همان ارتفاع این است که مقدار اولیه align-items، اموال که کنترل هماهنگی در محور صلیب را کنترل می کند، کشش است.

ما می توانیم از مقادیر دیگر برای کنترل نحوه برخورد با موارد استفاده کنیم:

align-items: flex-start
align-items: flex-end
align-items: center
align-items: کشش
align-items: baseline

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

هماهنگ کردن یک مورد با هماهنگی

املاک Align-Items دارایی خود را در تمام اقلام Flex به عنوان یک گروه تنظیم می کند. این به این معنی است که شما می توانید به طور صریح اموال خود را برای هدف قرار دهید تا یک مورد را هدف قرار دهید. اموال هماهنگی تمام مقادیر مشابه را به عنوان align-items به همراه مقدار خودکار، که مقدار را به آنچه که در کانتینر انعطاف پذیر تعریف می شود، بازنشانی می کند.

در این مثال بعدی بعدی، کانتینر فلکس دارای موارد مشابهی است: Flex-Start، که به این معنی است که اقلام همه به شروع محور صلیب هماهنگ شده اند. من اولین مورد را با استفاده از یک انتخابگر فرزند اول هدف قرار داده ام و این مورد را به هماهنگ کردن خود تنظیم کرده ام: کشش؛ یکی دیگر از آیتم ها با استفاده از کلاس خود انتخاب شده و با توجه به همتای خود انتخاب شده است. شما می توانید مقدار align-items را تغییر دهید یا مقادیر هماهنگی خود را بر روی موارد فردی تغییر دهید تا ببینید که چگونه این کار را انجام می دهد.

تغییر محور اصلی

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

اگر ما Flex-Direction را به ستون تغییر دهیم، آیتم های align-align و هماهنگ سازی موارد را به سمت چپ و راست هماهنگ می کنیم.

شما می توانید این را در مثال زیر امتحان کنید، که دارای یک ظرف انعطاف پذیر با Flex-Direct است: ستون هنوز در غیر این صورت دقیقا همانند مثال قبلی است.

هماهنگ کردن محتوا در محور صلیب - املاک هماهنگ

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

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

ویژگی های ترانه محتوا، مقادیر زیر را می گیرد:

align-content: Flex-Start
هماهنگی محتوا: Flex-End
هماهنگی محتوا: مرکز
هماهنگی محتوا: فضای بین
هماهنگی محتوا: فضای اطراف
هماهنگی محتوا: کشش
تطبیق محتوا: فضا به طور مساوی (در مشخصات FlexBox تعریف نشده است)

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

مقادیر دیگر را امتحان کنید تا ببینید که چگونه ویژگی های ترانه محتوا کار می کند.

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

توجه داشته باشید.: فضای ارزش به طور مساوی در مشخصات FlexBox تعریف نشده است و بعدا افزودن به مشخصات بسته بندی جعبه است. پشتیبانی مرورگر برای این مقدار به همان اندازه از مقادیر تعریف شده در مشخصات Flexbox نیست.

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

چه ویژگی های این مش را ارائه می دهد:

توانایی کنترل ساختار ستون اصلی قاب اصلی HTML-Clash؛
مدیریت جهت ترتیب تگ های HTML مانند طرح جدول؛
سفارش کنترل؛
و خیلی های دیگر.

تکنولوژی CSS-Flexbox خود را بر روی بلوک های اصلی در محله نسبی و محور عمودی مطابق با طرح زیر قرار می دهد:

جهت یابی

ما لیستی از مرورگرهای وب را ارائه می دهیم که از اموال در نظر گرفته شده از بلوک ها به عنوان استاندارد و با استفاده از پروژه های خاص پشتیبانی می کنند:

یعنی: 11.0، 10.0 -ms-
فایرفاکس: 28.0، 18.0 -moz-
کروم: 29.0، 21.0 -Webkit-
صفری: 6.1 -Webkit-
اپرا: 12.1 -Webkit
صفری (تحت خشخاش): 7.0 -Webkit-
اپرا مینی: 8
مرورگر Anroyd: 4.4، 4.1 -Webkit-
کروم (تحت آندروید): 44

1.1. نمایش املاک: فلکس

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

صفحه نمایش: Flex؛ - برای نمایش بلوک؛
صفحه نمایش: Inline-Flex؛ - برای صفحه نمایش درون خطی

لازم به ذکر است که برای برخی از نسخه های مرورگرها لازم است که این قانون را با استفاده از پروژه های ویژه تجویز کنید (به پاراگراف بالا مراجعه کنید)، و همچنین این واقعیت که تگ های HTML دروغ گفتن در والدین بدون بسته بندی ناشناس هستند:

1.2 هماهنگی به صورت افقی توجیه محتوا

این قانون برای تطبیق شرکت های وابسته به افقی در داخل کانتینر Parent FlexBox استفاده می شود. این قانون به ارث برده نمی شود.

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

فرمت ضبط

B-Podlogka (ارتفاع: 120px؛ پس زمینه - رنگ: #DDD؛ حاشیه: 0px؛ Padding: 10px؛ صفحه نمایش: Flex؛ صفحه نمایش: -webkit-flex؛ توجیه محتوا: Flex-Start؛ -Start؛)

B-Podlogka (توجیه محتوا: Flex-End؛)

B-Podlogka (توجیه محتوا: مرکز؛)

B-Podlogka (توجیه محتوا: فضای بین؛)

B-Podlogka (توجیه محتوا: فضای اطراف؛)

1.3. تراز کردن عمودی align

اموال مورد استفاده قرار می گیرد تا اشیاء به صورت عمودی کودک را درون کانتینر Flexbox پدر و مادر قرار دهد. لازم به ذکر است که موارد انعطاف پذیر ناشناس نیز تحت این هماهنگی قرار دارند. این قانون به ارث برده نمی شود. فقط بلوک های رشته اول تراز می شوند.

align-items
ارزش های:
کش آمدن.	بلوک های Flexbox، اگر ثابت نشده باشند، ارتفاع به کل ارتفاع کانتینر اصلی کشیده می شود. این پارامتر اولیه (اساسی) است.
Flex-Start	این در نظر گرفته شده است برای هماهنگ کردن موارد flexbox در امتداد لبه بالایی کانتینر اصلی، با توجه به Indents داخلی (padding).
انعطاف پذیری	این در نظر گرفته شده است برای هماهنگ کردن موارد flexbox در امتداد لبه پایین تر از کانتینر اصلی با توجه به Indents داخلی (PADDING).
مرکز	بلوک های فلکس کودک را در داخل یک ظرف فلکس در خط میانی بالاترین بلوک قرار می دهد.
پایه	بلوک های فلکس کودک را در داخل والدین نسبت به خط میانی متن در این بلوک ها جدا می کند.
اولیه
به ارث می برند.	این در نظر گرفته شده است برای پیام مترجم CSS که مقدار باید از برچسب پدر و مادر گرفته شود.

فرمت ضبط

b-podlogka (align-items: stretch؛ -webkit-align-items: کشش؛)

لازم به ذکر است که بلوک های فلکس کودک به کل ارتفاع ظرف کشش داده شده است، لازم است که آنها ارتفاع ثابت آنها را ندارند: ارتفاع: خودکار؛ .

B-Podlogka (Align-Items: Flex-Start؛)

B-Podlogka (Align-Items: Flex-End؛)

B-Podlogka (Align-Items: Center؛)

B-Podlogka (Align-Items: Baseline؛)

1.4 جهت گیری محور اصلی محور

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

فرمت ضبط

B-Podlogka (Flex-Direction: Row؛ -Webkit-Flex-Direction: ردیف؛)

B-Podlogka (Flex-Direction: Row-Reverse؛)

B-Podlogka (Flex-Direction: Column؛)

B-Podlogka (Flex-direction: ستون معکوس؛)

1.5. اقامت در چندین خط Flex-Wrap

مسئول قرار دادن بلوک های فلکس کودک به یک یا چند خط.

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

فرمت ضبط

b-podlogka (flex-wrap: wrap؛ -webkit-flex-wrap: wrap؛)

B-Podlogka (Flex-wrap: بسته بندی معکوس؛)

1.6 هدایت و چند جریان یک قانون انعطاف پذیر جریان

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

فرمت ضبط

B-Podlogka (Flex-Flow: Wrap Row؛ -Webkit-Flex-Flow: Wrap ردیف؛)

1.7 به صورت عمودی در تمام خطوط هماهنگی قرار دهید

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

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

کد نمونه

B-Podlogka (ارتفاع: 120px؛ Flex-Flow: Wrap ردیف؛ تطبیق محتوای: کشش؛)

B-Podlogka (Align-content: Flex-Start؛)

B-Podlogka (Align-Content: Flex-End؛)

B-Podlogka (ALIGN-CONTENT: CENTER؛)

B-Podlogka (محتوای هماهنگ: فضای بین؛)

B-Podlogka (هماهنگی محتوا: فضای اطراف؛)

علاوه بر قوانین مورد استفاده در رابطه با پدر و مادر کانتینر، قوانین متعددی برای عناصر دختر در Grid Flexbox وجود دارد. آنها را در جزئیات بیشتر در نظر بگیرید.

2.1. سفارش بلوک سفارش

TSSS-Rule برای سازماندهی برخی از عناصر جانبی در داخل والدین فلکس استفاده می شود. برای تنظیم بلوک به عنوان اولین، لازم است برای نشان دادن 1، و آن را به حرکت آن در پایان از -1. به ارث نیست

فرمت ضبط

B-Div1 (-Webkit سفارش: 1؛ سفارش: 1؛)

b-div5 (-webkit-order: -1؛ سفارش: -1؛)

2.2. پایه فلسفر پایه

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

کد نمونه

B-DIV3 (فلج کننده: 70 پیکسل؛ -Webkit-flex-base: 70 پیکسل؛)

تمام بلوک ها پایه ای را در مقدار پنجاه پیکسل و سوم - پیکسل های سوم تنظیم می کنند.

املاک هماهنگی محتوا، نوع تراز کردن ردیف ها را در داخل ظرف انعطاف پذیر در محور عرضی در حضور فضای آزاد تعیین می کند.

آن را به آن اعمال می شود: ظروف فلکس

مقدار پیش فرض: کش آمدن.

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

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

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

اعمال می شود به: ظروف فلکس

اولیه: کش آمدن.

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

چگونه CSS Flexbox کار می کند: معرفی ویژوال به سیستم طرح بندی طرح بندی در صفحه وب

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

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

خوب به نظر می رسد، اما بیایید ببینیم آیا در عمل صاف است. در این مقاله، 9 ویژگی محبوب ترین Flexbox را مطالعه خواهیم کرد، ما با آنچه که انجام می دهیم و چگونگی کار آنها را انجام خواهیم داد.

صفحه نمایش: Flex

در اینجا یک نمونه از یک صفحه است:

ما 4 عدد چند رنگی از اندازه های مختلف داریم که در داخل خاکستری DIV هستند. هر DIV دارای صفحه نمایش است: Block Property. بنابراین، هر مربع تمام عرض خط را می گیرد.

برای شروع کار با FlexBox، ما باید ظرف بسته بندی کانتینر خود را ایجاد کنیم. این کار مانند این است:

#Container (نمایش: Flex؛)

به نظر می رسد هیچ چیز به طور خاص تغییر نکرده است - Divs فقط به یک ردیف رسید. اما شما واقعا واقعا قدرتمند بود. شما مربع های خود را به عنوان یک ویژگی خنک به نام "Flex-Context" داد.

جهت فلکس

کانتینر فلکس دارای دو محور است: محور اصلی و عمود بر آن.

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

#Container (صفحه نمایش: Flex؛ جهت فلکس: ستون؛)

مهم است که توجه داشته باشید که جهت Flex-direction: ستون مربع ها را در امتداد محور عمود بر اصلی قرار نمی دهد. محور اصلی خود موقعیت مکانی خود را تغییر می دهد و اکنون از بالا به پایین هدایت می شود.

همچنین چند ویژگی برای جهت فلکس وجود دارد: ردیف معکوس و ستون معکوس.

محتوا را توجیه کنید

توجیه محتوا مسئول هماهنگی عناصر در محور اصلی است.

بیایید به سمت Flex-ردیابی بازگردیم: ردیف.

#Container (صفحه نمایش: Flex؛ Flex-Direction: Row؛ توجیه محتوا: Flex-Start؛)

توجیه محتوا می تواند 5 ارزش داشته باشد:

flex-Start؛
flex-end؛
مرکز؛
فاصله بین؛
فضای اطراف

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

ترکیب موارد

اگر محتوا را توجیه کند، با محور اصلی کار می کند، آیتم های align با محور عمود بر محور اصلی کار می کنند.

بیایید به سمت Flex-Director بازگردیم: ردیف و از طریق دستورات align-atems بروید

flex-Start؛
flex-end؛
مرکز؛
کش آمدن؛
پایه

شایان ذکر است که برای align-items: کشش ارتفاع مربعات باید برابر با خودکار باشد. برای align-items: برچسب های پاراگراف پایه نیازی به حذف نیست، در غیر این صورت به نظر می رسد مانند این:

برای بهتر شدن کارهای محور، بیایید توجیه محتوا را با هماهنگ کردن موارد متحد کنیم و ببینیم که چگونه مرکز تراکنش برای دو ویژگی Flex-region کار می کند:

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

align-self به شما امکان می دهد عناصر را به طور جداگانه تنظیم کنید.

#Container (Align-Items: Flex-Start؛). Square # One (Align-Self: Center؛) // فقط این مربع مرکز خواهد بود.

بیایید اعمال شطرنج خود را برای دو مربع، و برای دیگران ما اعمال align-items: مرکز و جهت فلکس: ردیف.

پایه فلج

Flex-base مسئول اندازه اولیه عناصر قبل از تغییر آنها با سایر خواص FlexBox تغییر می کند:

بر اساس انعطاف پذیری بر اندازه عناصر در امتداد محور اصلی تاثیر می گذارد.

بیایید ببینیم چه اتفاقی می افتد اگر جهت محور اصلی را تغییر دهیم:

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

انعطاف پذیری رشد

این ویژگی کمی پیچیده تر است.

برای شروع، بیایید از مربع هایمان به همان عرض 120 پیکسل بپرسیم:

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

بیایید سعی کنیم Flex-Grow را برابر با 1 برای هر مربع تنظیم کنیم:

مربع محل باقی مانده در ظرف را اشغال کرد. ارزش فلکس رشد ارزش عرض را لغو می کند.

اما در اینجا یک سوال وجود دارد: Flex-Grow: 1 معنی چیست؟

بیایید سعی کنیم Flex-Grow را به 999 تنظیم کنیم:

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

این به این معنی است که مهم نیست که ارزش از انعطاف پذیری رشد مهم است مهم است که در رابطه با دیگر مربع ها چیست:

در ابتدا، هر مربع فلکس رشد می کند 1، در مقدار آن معلوم است 6. بنابراین ظرف ما به 6 قسمت تقسیم می شود. هر مربع 1/6 قسمت فضای موجود در ظرف را می گیرد.

هنگامی که Flex-Grow از مربع سوم می شود 2، ظرف به 7 قسمت تقسیم می شود (1 + 1 + 2 + 1 + 1 + 1 + 1).

در حال حاضر مربع سوم، فضاهای 2/7 را اشغال می کند، بقیه - 1/7.

لازم به یادآوری است که Flex-Grow فقط برای محور اصلی کار می کند (تا زمانی که مسیر آن را تغییر دهیم).

انعطاف پذیری

Flex-shrink - مستقیم مستقیم از انعطاف پذیری رشد. این تعیین می کند که چگونه مربع می تواند در اندازه کاهش یابد.

Flex-Shrink استفاده می شود زمانی که اقلام در ظرف قرار نمی گیرند.

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

اجازه دهید flex-grow و flex shrink برابر با 1:

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

لازم به یادآوری است که انعطاف پذیری کاهش یافته بر اساس نسبت است. به این ترتیب، اگر مربع Flex-shrink 6 باشد و بقیه 2 باشد، این بدان معنی است که مربع ما سه برابر سریعتر از دیگران فشرده خواهد شد.

خمیدگی

فلکس جایگزین فلکس رشد، انعطاف پذیری و انعطاف پذیری است.

مقادیر پیش فرض: 0 (رشد) 1 (کوچک شدن) و خودکار (پایه).

ایجاد دو مربع:

مربع # One (فلکس: 2 1 300 پیکسل؛). square # two (flex: 1 2 300px؛)

هر دو مربع دارای همان انعطاف پذیر هستند. این به این معنی است که آنها هر دو در عرض 300px عرض خواهند بود (عرض کانتینر: 600 پیکسل به علاوه حاشیه و پدینگ).

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

چگونگی رشد و کوچک شدن

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

ریاضیات کوچک

اندازه اولیه ظرف: 640 پیکسل. اجازه دهید آن را در 20px در هر طرف برای padding، و ما 600px، فقط برای دو مربع.

هنگامی که عرض کانتینر برابر با 430 پیکسل (از دست دادن در 210 پیکسل) برابر می شود، اولین مربع (Flex-shrink: 1) 70 پیکسل را از دست می دهد. مربع دوم (Flex-Shrink: 2) 140 پیکسل را از دست می دهد.

هنگامی که ظرف به 340 پیکسل فشرده می شود، 300 پیکسل را از دست می دهیم. میدان اول 100px را از دست می دهد، دوم - 200px.

همین اتفاق می افتد با رشد فلکس.

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؛)