25
تشکر

فلکس باکس: آینده لی‌ اوت در CSS

CSS3 - سی اس اس 3

CSS3 – سی اس اس 3

فلکس باکس یا بگذارید بهتر بگوییم Flexbox، مجموعه ای از دستورات یا یک ماژول به حساب می آید که طراحان با استفاده از آنها میتوانند Layoutهای قابل انعطاف یا به نوعی شناور را به راحتی درست کنند که پیچیدگی های سیستم های دیگر را به شدت کاهش میدهد. وضعیت پشتیبانی این ویژگی، الان تنها در Opera mini پشتیبانی نمیشود، و به نظر میرسد زمان یادگیری این ویژگی فرارسیده است.

Flexbox آماده است

مدت تقریبا طولانی از معرفی ویژگی Flexbox در CSS3 گذشته است، اما همه طراحان منتظر این بودند تا این ویژگی به طور کامل در همه مرورگرها کار کند، که هم اکنون به این خواسته رسیدند. البته هنوز باید مدت دیگری را نیز برای استفاده از این ویژگی صبر کرد تا به طور کامل از این مسئله اطمینان پیدا کنیم.

مزیت استفاده از Flexbox این است که تمام کارهایی که میخواهیم برای Layoutسازی انجام دهیم متمرکز میشود. در حالی که هم اکنون برای اینکار باید از ویژگی های جداگانه ای مانند display یا float استفاده کرد.

استفاده از Flexbox

زمانی که شما به یک عنصر خاصیت display: flex را میدهید، آن عنصر تبدیل به flex container و بچه های آن تبدیل به flex items میشوند، و شما میتوانید به راحتی نحوه قرارگیری flex itemها را مشخص بکنید. تصویر زیر مشخص کننده نحو کار Flexbox است. عناصر میتوانند به راحتی درون  main axis و cross axis حرکت کنند.

Flexbox

Flexbox

استفاده از Flexbox طراحی ما برای سایت های ریسپانسیو را نیز آسان میکند.

این مطلب تنها شروع ما برای یادگیری Flexbox است. منتظر مطالب بعدی ما در مورد این ویژگی باشید.

  • Ali Amini می‌گه:

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


  • نظرات این مطلب بسته است.