راهنمای کامل Flexbox

مقدمه

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

زمینه

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

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

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

توجه: چیدمان Flexbox برای اجزای یک برنامه کاربردی و طرح‌بندی‌های در مقیاس کوچک مناسب‌تر است، در حالی که طرح‌بندی Grid برای طرح‌بندی‌های مقیاس بزرگ‌تر در نظر گرفته شده است.

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

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

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

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

• محور اصلی – محور اصلی ظرف فلکس، محور اولیه ای است که اقلام فلکس در امتداد آن قرار می گیرند. مراقب باشید، لزوماً افقی نیست. بستگی به ویژگی flex-direction دارد (به زیر مراجعه کنید).
• شروع اصلی | پایان اصلی – اقلام انعطاف پذیر در داخل ظرف قرار می گیرند که از شروع اصلی شروع می شود و به انتهای اصلی می رود.
• اندازه اصلی – عرض یا ارتفاع یک آیتم انعطاف پذیر، هر کدام که در بعد اصلی باشد، اندازه اصلی مورد است. ویژگی اندازه اصلی آیتم flex یا ویژگی “width” یا “height” است، هر کدام که در بعد اصلی باشد.
• محور متقاطع – محور عمود بر محور اصلی را محور متقاطع می گویند. جهت آن به جهت محور اصلی بستگی دارد.
• شروع متقابل | cross-end – خطوط فلکس با اقلام پر شده و در ظرف قرار می گیرند که از سمت شروع متقاطع ظرف فلکس شروع می شود و به سمت انتهای متقاطع می رود.
• اندازه متقاطع – عرض یا ارتفاع یک آیتم فلکس، هر کدام در بعد متقاطع باشد، اندازه متقاطع مورد است. ویژگی cross size هر کدام از “عرض” یا “ارتفاع” است که در بعد متقاطع باشد.

ویژگی های فلکس باکس

خواص برای پدر و مادر
(container)

Display

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

.container {
display: flex; /* or inline-flex */
}

flex-direction

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

.container {
flex-direction: row | row-reverse | column | column-reverse;
}

• ROW (پیش‌فرض): از چپ به راست در ltr. از راست به چپ در rtl
• row-reverse: از راست به چپ در ltr. از چپ به راست در rtl
• COLUMN: مانند ردیف اما از بالا به پایین
• Column-reverse: مانند ردیف معکوس اما از پایین به بالا

Flex-Wrap

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

.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (پیش‌فرض): همه موارد flex در یک خط قرار خواهند گرفت
• wrap: اقلام انعطاف‌پذیر روی چندین خط، از بالا به پایین بسته می‌شوند.
• wrap-reverse: اقلام انعطاف پذیر بر روی خطوط متعدد از پایین به بالا قرار می گیرند.

FLEX-Flow

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

.container {
flex-flow: column wrap;
}

Justify-Content

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

.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (پیش‌فرض): آیتم‌ها به سمت شروع جهت انعطاف‌پذیری بسته‌بندی می‌شوند.
• flex-end: اقلام به سمت انتهای جهت انعطاف پذیر بسته بندی می شوند.
• START: اقلام به سمت شروع جهت حالت نوشتن بسته بندی می شوند.
• END: اقلام به سمت انتهای جهت حالت نوشتن بسته بندی می شوند.
• LEFT: اقلام به سمت لبه سمت چپ ظرف بسته بندی می شوند، مگر اینکه با جهت انعطاف پذیری منطقی نباشد، آنگاه مانند شروع عمل می کند.
• RIGHT: اقلام به سمت لبه سمت راست ظرف بسته بندی می شوند، مگر اینکه در جهت انعطاف پذیری منطقی نباشد، سپس مانند انتهای آن عمل می کند.
• CENTER: موارد در امتداد خط در مرکز قرار می گیرند
• Space-Between: اقلام به طور مساوی در خط توزیع می شوند. اولین مورد در خط شروع، آخرین مورد در خط پایان است
• Space-Around: اقلام به طور مساوی در یک خط با فضای مساوی در اطراف آنها توزیع می شوند. توجه داشته باشید که از نظر بصری فضاها برابر نیستند، زیرا همه موارد در دو طرف فضای مساوی دارند. مورد اول یک واحد فاصله در لبه ظرف خواهد داشت، اما دو واحد فاصله بین مورد بعدی خواهد داشت زیرا مورد بعدی فاصله خاص خود را دارد که اعمال می شود.
• Space-Evenly: آیتم ها به گونه ای توزیع می شوند که فاصله بین هر دو مورد (و فاصله تا لبه ها) برابر باشد.

همچنین دو کلمه کلیدی اضافی وجود دارد که می توانید با این مقادیر جفت کنید: امن و ناامن. استفاده از ایمن تضمین می‌کند که به هر حال این نوع موقعیت‌یابی را انجام می‌دهید، نمی‌توانید عنصری را به گونه‌ای فشار دهید که خارج از صفحه نمایش داده شود (مثلاً از بالای صفحه) به گونه‌ای که محتوا را نمی‌توان پیمایش کرد (به نام «از دست دادن داده» ).

ALign-Items

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

.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• STREtch (پیش‌فرض): کشش برای پر کردن ظرف (هنوز به حداقل عرض/حداکثر عرض احترام می‌گذارد)
• flex-start / start / self-start: آیتم ها در ابتدای محور متقاطع قرار می گیرند. تفاوت بین اینها ظریف است و در مورد احترام به قوانین جهت انعطاف یا قوانین حالت نوشتن است.
• flex-end / end / self-end: موارد در انتهای محور متقاطع قرار می گیرند. تفاوت دوباره ظریف است و در مورد احترام به قوانین جهت انعطاف در مقابل قوانین حالت نوشتن است.
• CENTER: اقلام در محور متقاطع قرار دارند
• BASEline: اقلام مانند خطوط پایه آنها تراز می شوند

ALign-Content

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

.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• Normal (پیش‌فرض): موارد در موقعیت پیش‌فرض خود بسته‌بندی می‌شوند که گویی هیچ مقداری تنظیم نشده است.
• flex-start / start: اقلامی که تا ابتدای ظرف بسته بندی شده اند. flex-start (با پشتیبانی بیشتر) جهت انعطاف پذیری را نشان می دهد در حالی که start به جهت حالت نوشتن احترام می گذارد.
• flex-end / end: اقلامی که تا انتهای ظرف بسته بندی شده اند. (پشتیبانی بیشتر) flex-end جهت انعطاف پذیری را نشان می دهد در حالی که پایان جهت حالت نوشتن را ارج می نهد.
• CENTER: مواردی که در مرکز ظرف قرار دارند
• Space-Between: اقلام به طور مساوی توزیع شده اند. اولین خط در ابتدای ظرف و آخرین خط در انتهای ظرف است
• Space-Around: اقلام به طور مساوی با فضای مساوی در اطراف هر خط توزیع شده اند
• Space-Evenly: اقلام به طور مساوی با فضای مساوی در اطراف آنها توزیع می شوند
• stretch: خطوط کشیده می شوند تا فضای باقی مانده را اشغال کنند

Gap, Row-Gap, Column-Gap

ویژگی gap به صراحت فضای بین آیتم های انعطاف پذیر را کنترل می کند. این فاصله فقط بین موارد نه در لبه های بیرونی اعمال می شود.

.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}

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

این منحصراً برای flexbox نیست، شکاف در طرح‌بندی شبکه‌ای و چند ستونی نیز کار می‌کند.

پیشوند Flexbox

Flexbox برای پشتیبانی از اکثر مرورگرهای ممکن به برخی از پیشوندهای فروشنده نیاز دارد. این فقط شامل ویژگی های prepending با پیشوند فروشنده نیست، بلکه در واقع نام های دارایی و ارزش کاملاً متفاوتی وجود دارد. این به این دلیل است که مشخصات Flexbox در طول زمان تغییر کرده و نسخه‌های «قدیمی»، «tweener» و «جدید» را ایجاد کرده است.

شاید بهترین راه برای رسیدگی به این موضوع این باشد که با سینتکس جدید (و نهایی) بنویسید و CSS خود را از طریق Autoprefixer اجرا کنید، که به خوبی از عقب‌نشینی‌ها استفاده می‌کند.

از طرف دیگر، در اینجا یک @mixin Sass برای کمک به برخی از پیشوندها وجود دارد، که همچنین به شما ایده می‌دهد که چه نوع کارهایی باید انجام شود:

@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val; 
-moz-box-ordinal-group: $val; 
-ms-flex-order: $val; 
-webkit-order: $val; 
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}

مثال ها

بیایید با یک مثال بسیار بسیار ساده شروع کنیم، حل یک مشکل تقریباً روزانه: تمرکز کامل. اگر از flexbox استفاده می کنید ساده تر از این نمی تواند باشد.

<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
</ul>

.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}

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

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

.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction 
and if we allow the items to wrap 
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}

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

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

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}

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

<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>

.wrapper {
display: flex;
flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
flex: 1 100%;
}

/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. article
* 3. aside 1
* 4. aside 2
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}