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

سواد دیجیتال به معنای توانایی به کار گرفتن فناوری دیجیتال در زمینه‌های گوناگون است. در دنیایی که فناوری به سرعت در حال رشد است، داشتن سواد دیجیتال به اندازه خواندن و نوشتن اهمیت دارد. این توانایی به شما کمک می‌کند تا در زندگی شخصی، اجتماعی و کاری خود موفق باشید. (بیشتر…)

1. سلکتور – Selectors
2. اندازه‌ها – Units
3. ریسپانسیو – Responsive
4. پوزیشن – Position
5. ترنزیشن – Transition
6. ترنسفورم – Transform
7. ترنسفورم سه بعدی – 3D-Transform
8. انیمیشن – Animation
9. فلکس – Flex

مقدمه

• Two-Dimensional Layout
• Short Markup
• Presentation Independent of The Markup
• More Flexible
• Responsive Design Is Easier
• Skip Frameworks

Terminology

Grid Lines

Grid Rows – Horizontal Tracks

Grid Columns – Vertical Tracks

Grid Cells

Grid Area

Grid Gaps – Gutters

Grid Container

Grid Items

واژه لی‌اوت (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 آن تغییراتی بدهید تا همانند تصویر زیر شود.