آموزش چیدمان های CSS: از Float به Flexbox و Grid

مقدمه Introduction

• خوش آمدی Welcome

• آنچه باید بدانید What you should know

• با استفاده از پرونده های تمرینی Using the exercise files

1. نمای کلی از طرح بندی صفحه 1. An Overview of Page Layouts

• طرح بندی با HTML Layouts with HTML

• طرح بندی با CSS Layouts with CSS

• پشتیبانی از مرورگر و استانداردهای CSS Browser support and CSS standards

2. شناور ، نمایش و موقعیت 2. Float, Display, and Position

• عناصر درون خطی و بلوک Inline and block elements

• ویژگی های مدل جعبه The box model properties

• خاصیت نمایشگر The display property

• مدل جعبه و طرح بندی The box model and layouts

• خاصیت شناور The float property

• پاکسازی شناورها Clearing floats

• پروژه خود را تنظیم کنید Setting up your project

• ورزش: یک طرح با float بسازید Exercise: Build a layout with float

• موقعیت: نسبی و مطلق Position: Relative and absolute

• موقعیت: ثابت ، چسبنده و استاتیک Position: Fixed, sticky, and static

3. Flexbox 3. Flexbox

• شروع کار با Flexbox Getting started with Flexbox

• جهت گیری با فلكس جهت و بسته بندی فلكس Orientation with flex-direction and flex-wrap

• اندازه انعطاف پذیر Flexible sizing

• اندازه چندین مورد فلکس Sizing multiple flex items

• خاصیت سفارش The order property

• ظروف فلکس تودرتو Nesting flex containers

• ورزش: یک طرح با Flexbox بسازید Exercise: Build a layout with Flexbox

• ورزش: یک طرح با Flexbox بسازید Exercise: Build a layout with Flexbox

4. شبکه 4. Grid

• شبکه در مقابل Flexbox Grid vs. Flexbox

• شبکه ، سیستم های گرید و شبکه CSS Grid, grid systems, and CSS Grid

• یک طرح اولیه Grid ایجاد کنید Create a basic Grid layout

• ستون ها ، ردیف ها و روده ها با شبکه Columns, rows, and gutters with Grid

• موقعیت با شبکه Positioning with Grid

• تمرین: یک طرح با Grid بسازید Exercise: Build a layout with Grid

• بازرس شبکه Firefox Firefox Grid Inspector

نتیجه Conclusion

• مراحل بعدی و منابع Next steps and resources