• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

2 3159 ۱۹ مرداد ۹۳

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

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

در 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 میپردازیم.

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram