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

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



  آیا می دانید تا کنون 6336 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

CSS Flexbox (جلسه دوم): flex container و خاصیت(property) های مربوط به آن

9 4109 ۲۱ مرداد ۹۳

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

با سلام خدمت دوستان عزیز سون‌لرنی. امروز با جلسه ی دوم از سری آموزشی CSS Flexbox با شما همراه هستیم. در جلسه قبل درباره ی فلکس‌باکس صحبت کردیم و یه سری اصطلاحاتی رو بیان کردیم. در این جلسه با معرفی خاصیت های مربوط به flex container با شما همراه هستیم.

فلکس‌باکس یک سری خاصیت های جدیدی رو به CSS3 اضافه کرد که بخشی از اون‌ها بر flex container و بخشی دیگر بر flex items اعمال میشوند. یعنی خاصیت های flex container بر flex items اثری نداره و همچنین خاصیت های flex items بر flex container اثر نداره.

خاصیت های Flex Container

flexbox

display

flex-container

برای اینکه یک المنت به flex container  و بچه هایش به flex item تبدیل شوند باید به المنت مورد نظر display: flex; یا display: inline-flex; بدهیم.

 flex-direction


flex-directionخاصیت flex-direction نحوه ی قرار گرفتن flex item هارا به صورت ستونی و یا ردیفی تعیین میکند. این خاصیت چهار مقدار میگیرد.

  •  row: (مقدار پیشفرض) فلکس آیتم ها را به صورت ردیفی در کنار هم قرار میدهد. اگر direction صفحه rtl باشد، فلکس آیتم ها از راست به چپ و در غیر اینصورت از چپ به راست در کنار همدیگر قرار میگیرند.
  • row-reverse: این مقدار مانند مقدار row هست با این تفاوت که چیدمان فلکس ایتم هارا معکوس میکند. اگر direction صفحه rtl باشد، فلکس آیتم ها از چپ به راست در کنار هم قرار میگیرند و در غیر اینصورت فلکس آیتم ها از راست به چپ قرار میگیرند.
  • column : با این مقدار فلکس آیتم ها به صورت ستونی و از بالا به پایین در کنار هم قرار میگیرند.
  • column-reverse : با این مقدار فلکس آیتم ها از پایین به بالا در کنار هم قرار میدهد.

میتونید دمو رو ببینید و مقادیرشو هم تغییر بدید.

نکته : direction صفحه ی دمو rtl هست.

 

flex-wrap


flex-wrapبه صورت پیشفرض تمامی فلکس‌آیتم ها در یک خط قرار میگیرند. میتوان با استفاده از خاصیت flex-wrap تعیین کرد که فلکس آیتم ها در چند خط قرار بگیرند که به هر یک از این خط ها flex line میگویند.

  •  nowrap: (پیشفرض) آیتم ها در یک خط و در کنار هم قرار میگیرند.
  • wrap: آیتم ها در چند خط  قرار میگیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار میگیرند.
  • wrap-reverse: این مقدار معکوس مقدار wrap است.

میتونید دمو رو ببینید و مقادیرشو تغییر بدید.

 

flex-flow


میتوانید دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کنید. مقدار پیشفرض آن row nowrap است.

 

justify-content


justify-contentبا استفاده از این مقدار میتوانید نحوه ی چینش آیتم ها در محور اصلی(main axis) رو تعیین کنید. باید دقت داشته باشید که اگه خاصیت flex-direction برابر column یا column-reverse باشه، محور اصلی(main axis) عمودی خواهد بود و در غیر اینصورت محور اصلی افقی است. به همین ترتیب نقاط شروع و پایان محور های اصلی و عرضی(main axis & cross axis) نیز تغییر میکند.(با توجه به تصویر اول)

  •  flex-start: (پیشفرض) آیتم ها در آغاز flex line قرار میگیرند.
  • flex-end: آیتم ها در پایان flex-line قرار میگیرند.
  • center: آیتم ها در وسط flex line قرار میگیرند.
  • space-between: آیتم اول در ابتدا و آیتم آخر در انتهای flex line قرار میگیرند و بقیه آیتم ها در بین آنها با یک فاصله ی برابر قرار میگیرند.
  • space-around: آیتم ها با فضای برابر در کنار یکدیگر قرار میگیرند.

 

align-items


align-itemsاین خاصیت نحوه چینش فلکس‌آیتم هارا در محور عرضی(cross axis) مشخص میکند. این خاصیت مانند justify-content است تنها تفاوت آنها در مقادیرشان است.

  •  flex-start: آیتم‌ها در نقطه شروع عرضی(cross start) قرار میگیرند.
  • flex-end: آیتم ها در نقطه اتمام عرضی (cross end) قرار میگیرند.
  • center: آیتم ها در وسط flex line قرار میگیرند.
  • baseline: آیتم ها با توجه به خط هایشان هم‌تراز میشوند.
  • stretch: (پیشفرض) در صورتی که ارتفاع(height) آیتم‌ها مشخص نشده باشد، آیتم ها کشیده میشوند و flex line را پر میکنند.

 

align-content


align-content

این خاصیت هنگامی که flex container دارای فضای بیشتر از flex line هاست، میتواند نحوه ی چینش آنها را تعیین کنید. مقادیر خاصیت align-content برابر مقادیر خاصیت justify-content میباشد. تنها align-content یک مقدار بیشتر از justify-align دارد.

  •  flex-start: با این مقدار flex line ها در ابتدای flex container جمع میشود.
  • flex-end: با این مقدار flex line ها در انتهای flex container جمع میشوند.
  • center: با این مقدار flex line ها در وسط flex container جمع میشوند.
  • space-between: فضای خالی به طور مساوی بین flex line ها توضیع میشود. خط اولی در ابتدا و خط آخری در انتهای flex container قرار میگیرد.
  • space-around: فضای خالی به طور مساوی بین flex line ها تقسیم میشود.
  • stretch: (پیشفرض) flex line ها کشیده میشوند و فضای خالی را پر میکنند.

 

خاصیت های مربوط به flex container تمام شد؛ در جلسه بعد به برسی خاصیت های مروبط به flex items میپردازیم.

موفق باشید.

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

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

  • ‏‏

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

  • ‏‏

    خیلی خوب بود….فقط به نظرم یه نکته ی مهم رو فراموش کردین بگین که خاصیت display باید برای همه مرورگر ها اونم نه مثل همیشه و بلکه اینطوری:

    نوشته بشه…… برای خاصیت های دیگه چطور اونا رو هم باید برای هر مروگر بنویسیم؟

  • ‏‏

    به خاطر زحماتی که میکشید ممنون.

  • ‏‏

    سلام و خسته نباشید،ببخشید تفاوت asp.net با بقیه زبانها چیه؟میخوام سایت بسازم ولی نمدونم از کجا شروع کنم.آخه هرکسی یه چی میگه،پاسخ رو برام بی زحمت میل کنید

  • ‏‏
    شکوفه(۶ تیر ۱۳۹۴)

    باسلام وممنون از آموزش های عالیتون
    یک سوال از خدمتتون داشتم اینکه در کروم وقتی متنی کنار یا پایین عکس قرار میگیرد یک فاصله اضافه به متن میدهد که در فایرفاکس اینگونه نیست.تمامیه پیش فرض های کروم هم از بین بردم.با white-space هم تا جایی که میشد تغییرات دادم ولی انگار درست نمیشود
    ممنون میشم راهنمایی کنید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram