آموزش Flexbox

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : ۳۰ دقیقه
  • تعداد دانشجو : ۱۵۶۸
شما در گام پانزدهم از ۲۴ گام مسیر طراحی رابط کاربری هستید

کل مسیر پیشنهادی ما به ترتیب و گام به گام در زیر لیست شده است...

آموزش Flexbox کاملا رایگان!

سلام ویلرنی های عزیز 🙂

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

همونطور که خودتون میدونین وقتی از float استفاده می کردیم هم دستمون برای کار کردن با المان ها بسته بود و هم در مبحث ریسپانسیو کردن سایت مشکل داشتیم . اگر هم میخواستیم از بوت استرپ 3 استفاده کنیم مشکلاتی رو داشتیم و کد نویسیمون طولانی می شد . ولی با استفاده ازحالت Flexbox که در Bootstrap 4 هم هست میتونیم خیلی راحت با المان ها کار کنیم و در نمایشگر های مختلف نمایش های مختلفی رو با یه کدنویسی بهینه داشته باشیم .

پس اگر دوست دارین که با تکنولوژی روز جلو برین و بتونین یه کد نویسی بهینه و راحت رو با زیباترین شکل ممکن داشته باشین ، دوره جذاااب و تماشایی آموزش Flexbox رو بگذرونین .

دورس Flexbox

  • 1- معرفی Flexbox و تفاوت آن با Float

    ۲ دقیقه

    سلام به همراهان همیشگی وی لرن 🙂

    خیلی ممنونیم که بازم تو یکی دیگه از دوره های جذاب و کاربردی ما شرکت کردین . امیدواریم این دوره براتون مفید باشه و بتونین تو پروژه هاتون ازش استفاده کنین . (دعا هم یادتون نره لطفا 😉 )

    حالا میریم سر وقت توضیح دادن تکنولوژی جدید Flexbox در CSS3 و مقایسه اون با خاصیتِ بوقِ float در سی اس اس ( Flex که میاد به بازار float میشه دل آزار D: )

    در خاصیت float ما فقط میتونستیم المان رو به سمت راست یا چپ جابجا کنیم . همچنین تو بحث ریسپانسیو هم به مشکل میخوردیم که باز مجبور میشدیم خاصیت float رو none در نظر بگیرم . اما حالا با Flexbox میتونیم المان ها رو به راحتی در حالت عمودی یا افقی ، پشت سر هم قرار بدیم ، یا این که چینش المان ها رو معکوس کنیم ، یا این که فاصله بین المان ها ایجاد کنیم ( بدون این که بخوایم از ستون بندی های بوت استرپ و یا margin و padding استفاده کنیم ) و کارهای دیگه که باید در ادامه دوره ببینین . با ما در ادامه دوره آموزشی Flexbox همراه باشین .

     

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 2- آشنایی با display:flex در Flexbox

    ۵ دقیقه

    خب حالا که فهمیدیم Flexbox چی هست ، میخوایم اولین گام برای استفاده از این تکنولوژی رو خدمتتون بگیم .

    برای این که بتونیم خواص Flexbox رو روی المان ها اجرا کنیم ، باید از خاصیت  display: Flex “ استفاده کنیم . اگر این خاصیت رو به المان والد بدیم ، تمام المان هایی که داخل اون قرار میگیرن از خواص Flexbox تبعیت میکنن .

    از اونجایی که این تکنولوژی جدید هست ، بعضی از مرورگرها اززش پشتیبانی نمیکنن که باید به این نکته توجه داشته باشیم .

    حتما ویدیوی این قسمت رو تماشا کنین و لذت ببرین .

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 3- آشنایی با flex-direction در فلکس باکس

    ۴ دقیقه

    یه خاصیت مهم دیگه به نام flex-direction  هست . با استفاده از این خاصیت میتونیم بگیم المان ها ، افقی کنار هم ، یا این که عمودی زیر هم قرار بگیرن .

    چهار تا مقدار میگیره که براتون مختصرا توضیح میدیم .

    row :  در این حالت المان ها به صورت افقی به ترتیب از چپ به راست کنار هم قرار میگرین ( با این فرض که direction: ltr باشه ) . در ضمن این حالت به صورت پیش فرض روی المان ها اجرا  میشه .

    row-reverse : با این مقدار میتونیم جهت چینش المان ها رو معکوس کنیم . مثلا اگر المان ها از چپ به راست چیده شده بودن ، حالا از راست به چپ چیده میشن .

    column : با این مقدار المان ها به صورت عمودی به ترتیب از بالا به پایین زیر هم قرار میگیرن .

    column-reverse : جهت چینش المان ها رو در حالت عمودی عوض میکنه ( جهت چینش میشه از پایین به بالا )

    برای درک بهتر موضوع ، حتما فیلم آموزشی این درس رو تماشا کنین .

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 4- آشنایی با justify-content در فلکس باکس

    ۵ دقیقه

    خب حالا میخوایم خاصیت justify-content رو براتون توضیح بدیم .

    وقتی که المان های فرزند کل فضای المان والد رو نگرفتباشن ، میشه از این خاصیت برای مرتب کردنشون استفاده کرد .پنج تا مقدار میگیره که مختصرا براتون توضیح میدیم .

    flex-start : المان های فرزند در نقطه شروع المان والد قرار میگیرن . مثلا اگر direction: ltr باشه ، المان های فرزند از سمت چپِ المان والد کنار هم چیده میشن . ( این حالت به صورت پیش فرض اجرا میشه )

    flex-end : در این حالت المان های فرزند از انتهای المان والد کنار هم دیگه چیشده میشن .

    center : المان های فرزند در وسط المان والد قرار میگیرن .

    space-between : المان ها با فاصله بینشون کنار هم قرار میگرین .

    space-around : المان ها با فاصله بین ، قبل و بعدشون کنار هم قرار میگرین .

    اگر خواستین میتونین به این لینک هم یه سری بزنین .

    ویدیوی این قسمت رو حتما نگاه کنین .

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • 5- آشنایی با align-items در Flexbox

    ۲ دقیقه

    یکی دیگه از خاصیت های Flexbox ، خاصیت align-item هست . با این خاصیت میتونیم تراز المان های فرزند رو انجام بدیم . پنج تا مقدار هم میگیره .

    stretch : المان ها فرزند اون قدر کش میان که اندازشون با المان والد متناسب بشه .

    center : المان های فرزند در وسط المان والد قرار میگیرن .

    flex-start : المان های فرزند در ابتدای المان والد قرار میگیرن .

    flex-end : المان های فرزند در انتهای المان والد قرار میگیرن .

    baseline : المان های فرزند در خط اول المان والد قرار میگیرن .

    دیدن این لینک هم خالی از لطف نیست 🙂

    برای مشاهده ویدئوی این درس، کافیست بر روی پلیر کلیک کنید. همچنین برای بزرگ شدن پلیر، بر روی آیکون مربع شکل پلیر کلیک نمائید.

    در صورت نیاز به دانلود این ویدئو، اینجا کلیک کنید

  • ۴ دقیقه

    تو این درس در مورد خاصیت flex-wrap بحث می کنیم . با flex-wrap چیکار میتونیم بکنیم ؟ می تونیم مشخص کنیم که المان های دارای خاصیت Flex دارای Wrap باشن یا نه . چند تا مقدار میگیره که براتون توضیح میدیم :

    now-wrap : اگر مقدار nowrap بگیرن بدون اینکه وابسته به المان مادر باشن المان های فرزند در کنار هم قرار میگیرن اما اگر مقداری غیر از nowrap بگیرن وابسته به المان مادر ، اگر توی عرض parent المانی جا نشه ، میره پایین قرار میگیره .

    wrap : المان ها در صورت ضرورت مقدار wrap رو میگیرن .

    wrap-reverse :  المان ها در صورت ضرورت مقدار wrap رو به طور برعکس میگیرن .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

  • ۵ دقیقه

    دو تا خاصیت دیگه رو میخوایم بگیم که یکیش واقعا جالب و به درد بخور هست . اول flex-flow و بعدش order رو میگیم .

    flex-flow : این خاصیت کد کوتاه برای دو تا خاصیت flex-direction و flex-wrap هست  . طرز نوشتن کد هم به شکل زیر هست :

    flex-flow: flex-direction flex-wrap

    order : این همون خاصیت جالبی هست که گفتم . با این خاصیت میشه ترتیب چینش المان ها رو به شکل دلخواه خودمون تغییر داد . مثلا اگر چهار تا المان پشت سر هم داشته باشیم ، میتونیم المان دومی رو جای اولی و المان اولی رو جای سومی بذاریم . لینک زیر رو هم به عنوان مثال ببینین :

    مثال order

    برای این که خیلی خوب خاصیت order رو بفهمین حتما فیلم آموزش Flexbox تو این درس رو تماشا کنین .

    برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

    ضمنا ثبت نام در این دوره رایگان می باشد

نظرات آموزش Flexbox

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • ارتباط سریع و موثر با مدرس دوره
  • امکان ارسال فایل های پروژه
  • پاسخگویی متنی، صوتی و تصویری به سوالات شما