CSS Flexbox (جلسه اول): مقدمه - آینده Layout در CSS

- visibility ٢ mode_comment

به نام یگانه هستی بخش

با سلام خدمت دوستان و همراهان عزیز سون‌لرنی.

در CSS یکی از کارهایی که باید برای المنت ها انجام بدیم طرح بندی اونهاست. تا کنون برای طرح بندی یا Layout، از مدل های display ، margin: auto; ، max-width ، position ، float ، clear ، media query ، inline-block و ... و یا مدل هایی چون فریم‌ورک‌های bootstrap و یا fondation استفاده کردید.(برای اطلاعات بیشتر به  Learn CSS Layout مراجعه کنید.)

Flexbox

css-flexbox-preview Flexbox یک مدل طرح بندی محتواست که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم هایی درون یک container است که اندازه ی آنها نامشخص می باشد. مدل Flexbox همانطور که از نامش پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.

Flexbox خیلی هم تازه نیست! Flexbox ابتدا در ژولای 2009 با سینتکس display: box; معرفی شد و بعد از تغییراتی، در مارس سال 2011 سینتکس آن تغییر یافت و به display: flexbox; تبدیل شد. سپس در سپتامبر 2012 مرحله ی سوم بازبینی از syntax کنونی(display: flex;) آن توسط W3C صورت گرفت که این‌بار W3C از سینتکس کنونی آن راضی بود و مورد پیشنهاد W3C واقع شد.flex-timeline

میزان پشتیبانی مرورگرها از Flexbox

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

چگونه از Flexbox استفاده کنیم؟ 

Flexbox مجموعه ای از دستورات(Propertyها) یا به عبارتی یک ماژول به حساب می‌آید که با استفاده از آن میتوان Layout هایی قابل انعطاف ایجاد کرد. مهم ترین ویژگی Flexbox که آن را به آینده ی Layout در CSS تبدیل کرده است، استفاده ی آسان و بدون پیچیدگی آن است. Flexbox مدل طرح بندی مدرنی است که با استفاده از آن می توان به آسانی طرح هایی واکنش‌گرا(responsive) ایجاد کرد.

نحوه ی ایجاد Flexbox

برای اینکه با نحوه ی ایجاد و کار با Flexbox آشنا بشید، ابتدا باید اصطلاحاتی رو بدونید.flexbox

هنگامی که به یک المنت display: flex; میدهید، آن المنت به flex container و بچه هایش به flex items تبدیل میشوند. همانطور که در تصویر بالا میبینید، در فلکس باکس دو محور اصلی وجود دارد؛ محور اصلی و محور عرضی(main axis & cross axis). این دو محور دارای عرض و ارتفاع، نقطه ی شروع و پایان(main start, main end & cross start, cross end) است. (برای اطمینان خاطر باید بگم که ما با این محور ها کاری نداریم پس نگران نباشید 🙂 )

برای اینکه بتوانیم نحوه ی طرح بندی flex itemها را کنترل کنیم، خاصیت(property) هایی برای flex container و خاصیت هایی برای flex items وجود دارد. ان‌شاءالله در جلسه ی دوم به معرفی خاصیت های مربوط به flex container و در جلسه ی سوم به معرفی خاصیت های flex items میپردازیم.

پیروز و سربلند باشید

comment دیدگاه کاربران
sepehr

سلام.خسته نباشید.مرسی از مطالب مفیدی که در سایت قرار میدید.
اگر براتون امکان داره اموزش asp.net هم در سایت قرار بدید.
ممنون..

علی امینی

سلام.
من که asp کار نیستم ولی اساتیدی اینجا هستند که میتونن آموزش asp.net بذارن.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.