آموزش Flexbox

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یکی دیگه از خاصیت های 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 تو این درس رو تماشا کنین .