سلام، هابر!

یک شب خوب، بدون پیش‌بینی چیز جالبی، گفتگوی ما پیشنهادی از نویسنده نشریه «ترجمه 5 الگوی نشانه‌گذاری پاسخگو واقعاً مفید به کد» دریافت کرد، که او در بهار 2012 نوشت، برای نوشتن یک مقاله بازسازی، اما با استفاده از FlexBox. و توضیح همراه در مورد اینکه چه چیزی و چگونه کار می کند. پس از چند شک، علاقه به درک عمیق‌تر مشخصات همچنان برنده شد و من با خوشحالی نشستم تا همان نمونه‌ها را تایپ کنم. همانطور که در این زمینه غوطه ور شدیم، بسیاری از تفاوت های ظریف شروع به روشن شدن کردند، که به چیزی فراتر از طراحی مجدد طرح بندی ها تبدیل شد. به طور کلی، در این مقاله می خواهم در مورد چنین مشخصات فوق العاده ای به نام "CSS Flexible Box Layout Module" صحبت کنم و برخی از آن را نشان دهم. ویژگی های جالبو نمونه های کاربردی من با مهربانی از همه کسانی که علاقه مند هستند دعوت می کنم به هک بپیوندند.

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

بخش فنی

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

بنابراین. FlexBox دو نوع عنصر اصلی دارد: Flex Container و آن عناصر کودک- مورد فلکس. برای مقداردهی اولیه کانتینر، فقط از طریق css به عنصر اختصاص دهید صفحه نمایش: انعطاف پذیر;یا صفحه نمایش: inline-flex;. تفاوت بین flex و inline-flex تنها در اصل تعامل با عناصر اطراف کانتینر است، مشابه نمایش: بلوک; و نمایشگر: inline-block;، به ترتیب.

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

جهت محورها را می توان با استفاده از ویژگی css کنترل کرد جهت انعطاف پذیری. این ویژگی تعدادی مقدار می گیرد:
ردیف(پیش‌فرض): محور اصلی کانتینر فلکس جهت‌گیری یکسانی با محور درونی حالت جهت ردیف فعلی دارد. شروع (اصلی-شروع) و پایان (اصلی-پایان) جهت محور اصلی با شروع (در خط-شروع) و پایان (در خط-پایان) محور درون خطی مطابقت دارد.
ردیف معکوس: همه چیز مانند ردیف است، فقط شروع اصلی و پایان اصلی با هم عوض می شوند.
ستون: مانند ردیف، فقط در حال حاضر محور اصلی از بالا به پایین هدایت می شود.
ستون معکوس: مانند row-reverse، فقط محور اصلی از پایین به بالا هدایت می شود.
در مثال jsfiddle می توانید ببینید که چگونه این کار می کند.

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

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

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

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

یکی دیگر از ویژگی های مشابه قبلی است تراز کردن محتوا. این تنها مسئول تراز کردن کل خطوط نسبت به ظرف فلکس است. اگر آیتم های فلکس یک خط را اشغال کنند، تاثیری نخواهد داشت. این ویژگی شش مقدار مختلف را به خود می گیرد.
فلکس استارت: تمام خطوط تا ابتدای محور متقاطع فشرده می شوند
انعطاف پذیر: تمام خطوط تا انتهای محور متقاطع فشرده می شوند
مرکز: تمام خطوط بسته در مرکز محور متقاطع تراز شده اند
فضای بین: خطوط از لبه بالا به پایین توزیع می شوند و فضای خالی بین خطوط باقی می ماند در حالی که بیرونی ترین خطوط روی لبه های ظرف فشرده می شوند.
فضای اطراف: خطوط به طور مساوی در سراسر ظرف توزیع می شوند.
کش آمدن(پیش فرض): خطوط کشیده می شوند تا تمام فضای موجود را اشغال کنند.
می‌توانید نحوه عملکرد align-item و align-content را در این مثال امتحان کنید. من به طور خاص این دو ویژگی را در یک مثال ارائه کردم، زیرا آنها کاملاً با هم تعامل دارند و هر کدام وظیفه خود را انجام می دهند. توجه داشته باشید که وقتی عناصر در یک خط یا روی چندین خط قرار می گیرند چه اتفاقی می افتد.

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

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

رشد انعطاف پذیردر چندین منبع توضیح کاملاً نادرستی دارد. می گوید که ظاهراً نسبت اندازه عناصر در ظرف را تعیین می کند. در واقع، این صحیح نیست. این ویژگی ضریب بزرگنمایی عنصر را در صورت وجود مشخص می کند فضای خالیدر یک ظرف به طور پیش فرض، این ویژگی دارای مقدار 0 است. بیایید تصور کنیم که یک ظرف انعطاف پذیر داریم که عرض آن 500 پیکسل است، در داخل آن دو آیتم فلکس وجود دارد، هر کدام با عرض پایه 100 پیکسل. با این کار 300 پیکسل فضای خالی دیگر در ظرف باقی می ماند. اگر flex-grow را مشخص کنیم: 2؛ برای عنصر اول و flex-grow: 1؛ برای عنصر دوم. در نتیجه، این بلوک ها کل عرض موجود ظرف را اشغال می کنند، فقط عرض بلوک اول 300 پیکسل و بلوک دوم فقط 200 پیکسل خواهد بود. چی شد؟ اتفاقی که افتاد این بود که 300 پیکسل فضای خالی موجود در ظرف بین عناصر به نسبت 2:1، +200 پیکسل برای اولی و +100 پیکسل برای دوم توزیع شد. در واقع این روش کار می کند.

در اینجا ما به آرامی به یکی دیگر از ویژگی های مشابه، یعنی انعطاف پذیر. مقدار پیش فرض 1 است. همچنین فاکتوری را برای تغییر عرض عناصر، فقط در جهت مخالف، تعیین می کند. اگر ظرف دارای عرض باشد کمتراز مجموع عرض اصلی عناصر، پس این ویژگی اعمال می شود. به عنوان مثال، ظرف دارای عرض 600 پیکسل است و پایه انعطاف پذیر عناصر 300 پیکسل است. به عنصر اول flex-shrink: 2; و به عنصر دوم flex-shrink: 1; بدهید. حالا اجازه دهید ظرف را 300 پیکسل کوچک کنیم. بنابراین، مجموع عرض عناصر 300px بزرگتر از ظرف است. این تفاوت در نسبت 2:1 توزیع می شود، بنابراین ما 200 پیکسل از بلوک اول و 100 پیکسل از بلوک دوم کم می کنیم. اندازه جدید عناصر به ترتیب 100px و 200px برای عنصر اول و دوم است. اگر flex-shrink را روی 0 قرار دهیم، از کوچک شدن عنصر به اندازه کوچکتر از عرض پایه آن جلوگیری می کنیم.

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

هر سه ویژگی را می توان با استفاده از عبارت به صورت خلاصه نوشت خم شدن. به نظر می رسد این است:
انعطاف پذیری: ;
و همچنین می توانیم دو نسخه اختصاری دیگر بنویسیم، flex: auto;و flex: هیچ.، که به معنی flex: 1 1 خودکار;و flex: 0 0 auto;به ترتیب.

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

همین، خسته شدم ازش! مثال بزن!

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

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

Html ( پس‌زمینه: #cccc؛ حداقل ارتفاع: 100%؛ فونت-خانواده: sans-serif؛ نمایش: -webkit-flex؛ نمایش: flex؛ جهت انعطاف: ستون؛ ) بدنه (حاشیه: 0؛ بالشتک: 0 15 پیکسل ؛ نمایش: -webkit-flex؛ نمایش: انعطاف‌پذیر؛ جهت انعطاف‌پذیر: ستون؛ انعطاف‌پذیر: خودکار؛) .هدر (عرض: 100٪؛ حداکثر عرض: 960 پیکسل؛ حداقل عرض: 430 پیکسل؛ حاشیه: 0 خودکار 30 پیکسل؛ بالشتک : 30px 0 10px؛ نمایشگر: -webkit-flex؛ display: flex؛ flex-wrap: wrap؛ justify-content: space-ween; box-size: border-box;) .main (عرض: 100%؛ حداکثر عرض : 960 پیکسل؛ حداقل عرض: 430 پیکسل؛ حاشیه: خودکار؛ رشد انعطاف پذیر: 1؛ اندازه جعبه: جعبه حاشیه؛ ) پاورقی ( پس زمینه: #222؛ عرض: 100 درصد؛ حداکثر عرض: 960 پیکسل؛ حداقل عرض : 430 پیکسل؛ رنگ: #eee؛ حاشیه: خودکار؛ بالشتک: 15 پیکسل؛ اندازه جعبه: جعبه حاشیه؛ )

با توجه به اینکه flex-grow را مشخص کردیم: 1 برای .main; تا ارتفاع کامل در دسترس کشیده می شود، بنابراین پاورقی را به پایین فشار می دهد. امتیاز این راه حل این است که پاورقی می تواند ارتفاع غیر ثابتی داشته باشد.

حالا بیایید لوگو و منو را در هدر قرار دهیم.
.logo (اندازه قلم: 0؛ حاشیه: -10px 10px 10px 0؛ نمایش: flex؛ flex: هیچ؛ تراز موارد: مرکز؛ ) .logo:before, .logo:after ( محتوا: ""؛ نمایش: block ; ) .logo:before ( پس‌زمینه: #222؛ عرض: 50 پیکسل؛ ارتفاع: 50 پیکسل؛ حاشیه: 0 10 پیکسل 0 20 پیکسل؛ شعاع حاشیه: 50%؛ ) .logo:after ( پس‌زمینه: #222؛ عرض: 90 پیکسل؛ ارتفاع . 50px؛ اندازه قلم: 1.5rem؛ رنگ: #eee؛ متن-تزیین: هیچکدام؛ حاشیه: 5px 0 0 5px؛ نمایش: -webkit-flex؛ نمایش: flex؛ justify-content: center؛ align-اقلام: مرکز. )

از آنجایی که هدر دارای انعطاف پذیری است: wrap; و justify-content: space-between; لوگو و منو در اضلاع مختلف سربرگ پراکنده است و اگر فضای کافی برای منو وجود نداشته باشد به زیبایی زیر لوگو حرکت می کند.

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

جعبه (اندازه قلم: 1.25rem؛ ارتفاع خط: 1.5؛ سبک قلم: مورب؛ حاشیه: 0 0 40px -50px؛ نمایش: -webkit-flex؛ نمایش: flex؛ flex-wrap: wrap؛ justify-content: مرکز; : خودکار؛ )

همانطور که می بینید برای .box-base، جایی که عنوان و متن را داریم، عرض پایه را با flex-base: 430px;و همچنین با استفاده از انقباض بلوک ممنوع شد فلکس شرینک: 0;. با این دستکاری گفتیم که عرض محتوا نمی تواند کمتر از 430 پیکسل باشد. و با توجه به اینکه برای .box نشان می دهم flex-wrap: wrap;در لحظه ای که نوار کناری و محتوا در container.box قرار نمی گیرند، نوار کناری به طور خودکار زیر محتوا قرار می گیرد. و همه اینها بدون برنامه @رسانه ها! به نظر من این واقعاً خیلی باحال است.

ما با محتوای سه ستونی باقی مانده ایم. چندین راه حل برای این مشکل وجود دارد که من یکی از آنها را نشان می دهم؛ در طرح بندی های دیگر گزینه دیگری وجود دارد.
بیایید یک ظرف بسازیم، آن را .content بنامیم و آن را پیکربندی کنیم.
.content ( حاشیه-پایین: 30 پیکسل؛ نمایش: -webkit-flex؛ نمایش: فلکس؛ انعطاف پذیر: بسته بندی؛ )

ظرف دارای سه ستون، بنرها، .پست ها، نظرات
بنرها ( flex: 1 1 200px; ) .posts ( حاشیه: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( حاشیه: 0 0 30px 30px; flex: 1 1 200px

عرض ستون ها را 200 پیکسل گذاشتم تا ستون ها زیاد باریک نشوند، اما بهتر است در صورت نیاز زیر هم جابجا شوند.

با توجه به چیدمان، نمی‌توانیم بدون @media محتوا را انجام دهیم، بنابراین بیایید رفتار ستون‌ها را برای عرض کمی بیشتر تنظیم کنیم.<800px и <600px.
صفحه رسانه @ و (حداکثر عرض: 800 پیکسل) ( .بنرها ( حاشیه-چپ: -30 پیکسل؛ نمایش: -webkit-flex؛ نمایش: انعطاف‌پذیر؛ پایه انعطاف‌پذیر: 100%؛ ) .پست‌ها ( حاشیه-چپ: 0؛ ) ) صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) ( . محتوا (نمایش: بلوک؛ ) بنرها ( حاشیه: 0؛ نمایش: مسدود؛ ) .نظرات ( حاشیه: 0؛ ) )

وقتی صحبت از ایجاد یک طرح بندی در FlexBox می شود، این همه جادو است. کار دیگری که من دوست داشتم در طرح پنجم است، به طور خاص مربوط به اقتباس محتوا است.

ما می بینیم که چگونه در وضوح دسکتاپ پست ها در یک شبکه سه تایی پشت سر هم ساخته می شوند. هنگامی که عرض درگاه دید کمتر از 800 پیکسل می شود، شبکه به ستونی با پست ها تبدیل می شود، جایی که عکس پست به طور متناوب در سمت چپ و راست محتوای پست ردیف می شود. و اگر عرض کمتر از 600 پیکسل باشد، عکس پست کاملاً پنهان می شود.
.grid (نمایش: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-bass: calc(33.33% - 30px * 2/3)؛ نمایش: -webkit-flex؛ نمایش: flex؛ flex-wrap: wrap؛ .grid-img (حاشیه: 0 خودکار 20 پیکسل؛ انعطاف: 0 1 80%؛ ) .grid-cont( flex: 100% grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child( even) .grid-img ( حاشیه: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(فرد) .grid-img ( حاشیه: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title (تراز متن: چپ؛ ) ) صفحه رسانه @ و (حداکثر عرض: 600 پیکسل) ( .grid-img (نمایش: هیچ؛ ) )

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

مشخصات Flexbox (Flexible Box Layout Module).روشی برای قرار دادن عناصر در جهت افقی یا عمودی است.

Flexbox مجموعه ای از ویژگی ها را برای یک ظرف انعطاف پذیر والدین و برای اقلام فلکس فرزند ترکیب می کند.

برای اینکه یک عنصر به یک ظرف انعطاف پذیر تبدیل شود، باید به آن اختصاص داده شود صفحه نمایش: انعطاف پذیر;یا صفحه نمایش: inline-flex;(به ترتیب بلوک یا خط).

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

خواص ظروف فلکس
جهت انعطاف پذیری	جهت محور اصلی را مشخص می کند. مقادیر ممکن: ردیف- از چپ به راست (پیش فرض)؛ ردیف معکوس- از راست به چپ؛ ستون- بالا پایین؛ ستون معکوس- پایین بالا
بسته بندی انعطاف پذیر	تعیین می کند که آیا ظرف چند خطی است یا خیر. مقادیر ممکن: در حال حاضر- عناصر فلکس در یک خط ردیف می شوند؛ اگر در ظرف قرار نگیرند، از مرزهای آن فراتر می روند (به طور پیش فرض). بسته بندی کردن- اگر عناصر فلکس در یک خط قرار نگیرند در چندین خط ردیف می شوند. بسته بندی معکوس- شبیه به بسته بندی کردن، اما انتقال از پایین به بالا انجام می شود.
فلکس جریان	دو پارامتر را همزمان تعریف می کند: flex-direction و flex-wrap. به عنوان مثال، flex-flow: ستون بسته بندی;
توجیه-محتوا	تراز عناصر را در امتداد محور اصلی تعیین می کند. مقادیر ممکن: فلکس استارت- عناصر فلکس به ابتدای محور اصلی فشرده می شوند (به طور پیش فرض). انعطاف پذیر- عناصر انعطاف پذیر در انتهای محور اصلی فشرده می شوند. مرکز- عناصر انعطاف پذیر در مرکز محور اصلی قرار دارند. فضای بین- عناصر انعطاف پذیر در امتداد محور اصلی توزیع می شوند که اولین عنصر به ابتدای محور و آخرین عنصر تا انتها فشرده می شود. فضای اطراف- عناصر انعطاف پذیر در امتداد محور اصلی توزیع می شوند و فضای آزاد به طور مساوی بین عناصر تقسیم می شود. اما شایان ذکر است که فضاها با هم جمع می شوند و فاصله بین عناصر دو برابر فاصله بین لبه های ظرف و بیرونی ترین عناصر است.
تراز کردن آیتم ها	تراز عناصر را در امتداد محور عرضی تعیین می کند. مقادیر ممکن: فلکس استارت- عناصر انعطاف پذیر به ابتدای محور عرضی (به طور پیش فرض) فشرده می شوند. انعطاف پذیر- عناصر انعطاف پذیر در انتهای محور عرضی فشرده می شوند. مرکز- عناصر انعطاف پذیر در مرکز محور عرضی قرار دارند. خط پایه- عناصر انعطاف پذیر در امتداد خط پایه خود تراز شده اند. خط پایه یک خط خیالی است که در امتداد لبه پایین کاراکترها بدون در نظر گرفتن اورهانگ ها مانند حروف "d"، "r"، "ts"، "sch" امتداد می یابد. کش آمدن- المان های انعطاف پذیر کشیده می شوند و تمام فضای موجود را در امتداد محور عرضی اشغال می کنند. اما اگر عناصر دارای ارتفاع مشخصی باشند، پس کش آمدننادیده گرفته خواهد شد.
تراز کردن محتوا	تراز محوری کل ردیف های اقلام انعطاف پذیر را تعیین می کند. مقادیر ممکن: فلکس استارت- ردیف های عناصر انعطاف پذیر به ابتدای محور عرضی (به طور پیش فرض) فشرده می شوند. انعطاف پذیر- ردیف هایی از عناصر انعطاف پذیر در انتهای محور عرضی فشرده می شوند. مرکز- ردیف های عناصر انعطاف پذیر در مرکز محور عرضی قرار دارند. فضای بین- ردیف هایی از عناصر انعطاف پذیر در امتداد محور عرضی توزیع می شوند که ردیف اول تا ابتدای محور و آخرین ردیف تا انتها فشار داده می شود. فضای اطراف- ردیف هایی از عناصر انعطاف پذیر در امتداد محور عرضی توزیع می شوند، با فضای آزاد به طور مساوی بین ردیف ها تقسیم می شود. اما شایان ذکر است که فضاها جمع می شوند و فاصله بین خطوط دو برابر فاصله بین لبه های ظرف و بیرونی ترین خطوط است. کش آمدن- ردیف هایی از عناصر انعطاف پذیر کشیده شده اند و تمام فضای موجود را در امتداد محور عرضی اشغال می کنند. اما اگر عناصر دارای ارتفاع مشخصی باشند، پس کش آمدننادیده گرفته خواهد شد. این ویژگی برای یک کانتینر فلکس تک خطی کار نمی کند.

ویژگی های عنصر فلکس
سفارش	ترتیب ظاهر شدن یک عنصر انعطاف پذیر منفرد در ظرف انعطاف پذیر را تعیین می کند. به عنوان یک عدد صحیح مشخص شده است. پیش فرض 0 است، سپس عناصر به ترتیب جریان طبیعی از یکدیگر پیروی می کنند. معنی سفارشوزن موقعیت عنصر در دنباله را به جای موقعیت مطلق آن مشخص می کند.
مبتنی بر انعطاف پذیری	قبل از تخصیص فضای داخل ظرف، اندازه پایه یک آیتم فلکس را مشخص می کند. را می توان در px، ٪، em و سایر واحدهای اندازه گیری مشخص کرد. در اصل، این یک نوع نقطه شروع نسبت به آن است که عنصر کشیده یا فشرده می شود. مقدار پیش فرض - خودکار، با اندازه عنصر بسته به اندازه محتوای داخلی.
رشد انعطاف پذیر	تعیین می کند که آیتم فلکس چقدر فضای خالی در داخل ظرف به اندازه پایه خود اضافه می کند. توسط یک عدد صحیح که به عنوان نسبت عمل می کند مشخص می شود. پیش فرض 0 است. اگر همه عناصر flex-grow: 1، سپس همه آنها به یک اندازه خواهند بود. اگر یک مورد فلکس را روی 2 تنظیم کنید، دو برابر بقیه به اندازه پایه خود اضافه می کند.
انعطاف پذیر	تعیین می کند که اگر فضای کافی وجود نداشته باشد، عنصر فلکس نسبت به کاهش عناصر همسایه در داخل ظرف فلکس، چقدر کوچک می شود. توسط یک عدد صحیح که به عنوان نسبت عمل می کند مشخص می شود. پیش فرض 1 است. اگر یک عنصر flex روی آن تنظیم شده باشد فلکس شرینک: 2، اگر ظرف کوچکتر از مجموع اندازه پایه عناصر موجود باشد، دو برابر از اندازه پایه آن کم می شود.
خم شدن	سه پارامتر را به طور همزمان تعریف می کند: flex-grow، flex-shrink، flex-basis. به عنوان مثال، flex: 1 1 200px;
خود تراز کردن	تراز پیش فرض یا را لغو می کند تراز کردن آیتم ها، برای یک عنصر فلکس خاص. مقادیر ممکن: فلکس استارت- عنصر انعطاف پذیر به ابتدای محور عرضی (به طور پیش فرض) فشار داده می شود. انعطاف پذیر- عنصر انعطاف پذیر در مقابل انتهای محور عرضی فشرده می شود. مرکز- عنصر انعطاف پذیر در مرکز محور عرضی قرار دارد. خط پایه- عنصر انعطاف پذیر با خط پایه تراز شده است. کش آمدن- المان های انعطاف پذیر کشیده می شوند و تمام فضای موجود را در امتداد محور عرضی اشغال می کنند. اما اگر ارتفاع داده شود، پس کش آمدننادیده گرفته خواهد شد.

ویژگی های استفاده از Flexbox در عمل

1. تراز سمت راست

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

یک طراح صفحه‌آرایی صفحه اینترنت اغلب با وظیفه تراز کردن بلوک‌های CSS در یک صفحه مواجه است. به عنوان مثال، می توانید تمام بلوک ها را یکی پس از دیگری، به صورت افقی قرار دهید، آنها را در مرکز یا در پایین ظرف قرار دهید و غیره. با ظهور پارامتر ویژگی display - flex، این کار بسیار ساده شده است. این فناوری برای چیدمان عناصر فرزند، یعنی عناصر درون یک بلوک یا ظرف طراحی شده است. پارامترهای این طرح بیش از حد کافی است.

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

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:stretch;
}

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

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

کانتینر div (
عرض: 50 پیکسل؛
پس زمینه:سبز
حاشیه: 5 پیکسل
}

ما ارتفاع را عمدا تعیین نمی کنیم. کد HTML به شکل زیر است:

نتیجه کد در شکل نشان داده شده است.

اگر ارتفاع بلوک ها را نیز مشخص کنید چه اتفاقی می افتد:

کانتینر div (
عرض: 50 پیکسل؛
ارتفاع: 50 پیکسل؛
پس زمینه:سبز
حاشیه: 5 پیکسل
}

حالا بیایید ارتفاع را برداریم و عرض بلوک ها را برابر با 100 درصد کنیم.

کانتینر div (
عرض: 100%؛
پس زمینه:سبز
حاشیه: 5 پیکسل
}

ما آن را دریافت می کنیم.

پارامتر دیگر تراز کردن محتوااست مرکزو به شما امکان می دهد تمام بلوک ها را در مرکز تراز کنید.

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:center;
}
.container div(
عرض: 50 پیکسل؛
ارتفاع: 50 پیکسل
پس زمینه:سبز
حاشیه: 5 پیکسل
}

نتیجه:

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

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:flex-end;
}

پارامتر فلکس استارتهمه چیز را دقیقا برعکس انجام خواهد داد.

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:flex-start;
}

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

بخشی از کد CSS:

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:space-between;
}

نتیجه:

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

ظرف (
عرض: 450 پیکسل
ارتفاع: 250 پیکسل
حاشیه: 1px جامد #000000;
صفحه نمایش: انعطاف پذیر;
flex-wrap: wrap;
align-content:space-around;
}

بنابراین ویژگی css تراز کردن محتواپارامترهای زیادی دارد: کشش، خم شدن-شروع، خم شدن-انتها، مرکز، فضای بین، فضای اطراف.

همانطور که از مثال های بالا می بینید، با تغییر یک پارامتر از ویژگی css align-content، از تراز کردن بلوک های css با استفاده از فناوری flex به روش های کاملاً متفاوتی استفاده می کنیم. این کد در اینترنت اکسپلورر تا نسخه 10 کار نمی کند.

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

هدف از CSS Flexbox

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

CSS Flexbox ایجاد طرح‌های واکنش‌گرا را بسیار آسان‌تر از استفاده از Float و موقعیت‌یابی می‌کند.

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 اضافه شده است.

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

به عنوان مثال، بیایید یک پاورقی دیگر را با استفاده از flexbox علامت گذاری کنیم و یک بلوک متشکل از سه عنصر در عنصر .col__article ایجاد کنیم (حداقل عرض یک عنصر 300 پیکسل است). چهار بلوک را در فوتر قرار می دهیم (حداقل عرض یک بلوک 200 پیکسل است).

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

ارزش های

.flex-item ( سفارش:<целое число>; }

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

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

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

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

ارزش های

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

اگر همه اقلام flex دارای مقدار flex-grow یکسان باشند، همه موارد در ظرف دارای اندازه یکسانی خواهند بود.

آیتم فلکس دوم فضای بیشتری را نسبت به اندازه اقلام فلکس دیگر اشغال می کند.

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

انعطاف پذیر

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

ارزش های

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

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

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

اعداد منفی مجاز نیستند.

مبتنی بر انعطاف پذیری

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

ارزش های

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

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

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

خم شدن

این خصوصیت مختصری برای ویژگی های flex-grow، flex-shrink و flex-bases است. در میان مقادیر دیگر، می توانید خودکار (1 1 خودکار) و هیچ (0 0 خودکار) را نیز تنظیم کنید.

ارزش های

.flex-item (flex: هیچ | خودکار | [ ? || ]; }

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

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

خود تراز کردن

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

ارزش های

.flex-item ( تراز کردن: خودکار | شروع انعطاف پذیر | خم شدن | مرکز | خط مبنا | کشش؛ )

برای عناصر انعطاف‌پذیر سوم و چهارم، تراز از طریق ویژگی align-self دوباره تعریف شده است.