طراحی وب: ۹- فلکس

واژه لی‌اوت (Layout) در CSS به معنای شیوه چیدمان المنت‌ها در صفحه وب است. از قبل با لی‌اوت‌های (block, inline& inline-block) آشنا شدید. فلکس (flex) یک نوع لی‌اوت یک‌بعدی است که از انواع پیشین انعطاف پذیرتر می‌باشد. وقتی فلکس‌ را یک بعدی توصیف می‌کنیم، یعنی آیتم‌ها می‌توانند در یک ردیف به صورت افقی کنار هم نمایش داده شوند یا در یک ستون به صورت عمودی زیر هم چیده شوند. در برابر گرید (grid) که یک لی‌اوت دو بعدی است.

محورهای فلکس

به المنتی که فلکس است Container و به المنت‌های درون آن Item می‌گویند. در لی‌اوت فلکس دو محور وجود دارد. (محور اصلی و محور متقاطع)

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

پراپرتی‌های کانتینر

display

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

flex-direction

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

justify-content

فاصله بین آیتم‌ها را در جهت محور اصلی تنظیم می کند.

align-items

تراز کردن آیتم‌ها در محور کراس

پراپرتی‌های آیتم

align-self

تراز کردن یک آیتم در محور کراس

flex-grow

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

flex-shrink

آیتم مورد نظر به چه نسبت می‌تواند در جهت محور اصلی فشرده شود.

flex-basis

اندازه آیتم موردنظر در جهت محور اصلی را تعیین می‌کند.

order

ترتیب آیتم‌ها را تعیین می‌کند.

پراپرتی فلکس چند خطی

flex-wrap

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

align-content

خطوط را در جهت محور کراس تراز می‌کند.

مثال

به کمک فلکس به راحتی می‌توان چند ستون با اندازه برابر درست کرد.

.container {
	display: flex;
}

مثال

با کمک فلکس به راحتی می‌توان یک المنت را در مرکز قرار داد.

.container {
	display: flex;
	align-items: center;
	justify-content: center;
}

مثال

با کمک فلکس می‌توان کاری کرد footer همیشه پایین صفحه قرار بگیرد.

.container {
	display: flex;
	flex-direction: column;
}

.item-1 {
	flex-grow: 1;
}

مثال

به لی‌اوت زیر Media Objects می‌گویند.

.container {
	display: flex;
	align-items: center;
}

مثال

لی‌اوت ماسونری Masonry Layout

.container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

مثال

منو با فاصله‌های برابر

.container {
	display: flex;
	justify-content: space-between;
}

تمرین ۱

• این فایل را دانلود کنید.
• آن را در فولدر web2 باز کنید.
• در فایل CSS آن تغییراتی بدهید تا همانند تصویر زیر شود.