آموزش Flexbox

  • مدرس : علی مظلوم
  • سطح آموزش : متوسط
  • مدت : 30 دقیقه
  • تعداد دانشجو : 2500

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

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

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

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

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

    2 دقیقه

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

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

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

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

     

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

    5 دقیقه

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

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

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

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

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

    4 دقیقه

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

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

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

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

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

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

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

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

    5 دقیقه

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

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

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

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

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

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

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

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

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

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

    2 دقیقه

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

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

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

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

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

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

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

  • 4 دقیقه

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

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

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

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

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

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

  • 5 دقیقه

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

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

    flex-flow: flex-direction flex-wrap

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

    مثال order

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

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

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

نظرات دوره آموزش مجازی Flexbox

  • برای مشاهده نظرات و سوالات، بر روی دکمه مربوطه کلیک کنید
  • قابلیت ارسال نظرات به صورت متنی، صوتی، تصویری
2.6K
0
افکار شما را دوست دارم، لطفا نظر دهیدx