جستجو برای:
  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت
 
  • 02144824488
  • info@myhamyar.com
  • بلاگ
  • تماس با ما
  • درباره ما
همیارِمَن  | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیک
دسترسی سریع
  • پشتیبان سایت
0

ورود و ثبت نام

  • خانه
  • طراحی سایت
  • خدمات ما
    • سامانه یادگیری الکترونیکی – سایا (LMS)
    • سامانه الکترونیکی مدیریت آموزش (ساما) (EMS)
    • پشتیبانی نرم افزار
    • پشتیبانی سخت افزار
    • پشتیبانی شبکه
    • پشتیبانی ماشین های اداری
  • نمونه کارها
  • قالب و افزونه
  • دسته بندی مطالب
    • آموزش مجازی
    • اخبار سینما
    • افزونه وردپرس
    • آموزش افزونه وردپرس
    • بازی
    • دوره های رایگان
    • سریال
    • فناوری
    • فیلم
      • اکشن
      • تاریخی
      • ترسناک
      • کمدی
      • هیجان انگیز
      • ورزشی
    • قالب وردپرس
      • قالب خبری و وبلاگ
      • قالب شرکتی
      • قالب نمونه کار
      • قالب های چند منظوره
    • مقالات
      • بازایابی دیجیتال
      • برنامه نویسی
      • تولید و بازاریابی محتوا
      • طراحی و گرافیک
  • تماس با ما
  • DMCA
  • پشتیبان سایت

بلاگ

همیارِمَن | آموزش برنامه نویسی و طراحی سایت | طراحی گرافیکبلاگدوره های رایگاننحوه کامل فلکس باکس یا Flexbox در CSS3

نحوه کامل فلکس باکس یا Flexbox در CSS3

15 آبان 1400
ارسال شده توسط همیار من
دوره های رایگان
313 بازدید
آموزش صفحه بندی یا Pagination در CSS

تعریف فلکس باکس یا Flexbox

فهرست عناوین

  • تعریف فلکس باکس یا Flexbox
  • آموزش کامل فلکس باکس یا Flexbox در CSS3
  • کار با ویژگی Flex-Direction در CSS3
  • کار با ویژگی Flex-Warp در CSS3
  • کار با ویژگی Flex-Flow در CSS3
  • کار با ویژگی Justify-Content در CSS3
  • کار با ویژگی Align-Items در CSS3
  • کار با ویژگی Align-Content در CSS3

بطور کلی بدونید فلکس باکس یک ماژول برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد، که با استفاده از این ماژول میتوانیم به راحتی طرح بندی های واکنش گرا ( قابل انعطاف تری ) را در یک صفحه وب ایجاد نماییم.

قبلا ( یعنی قبل از اینکه FlexBox به وجود بیاد ) طراحان وب برای قالب بندی یا طرح بندی یک صفحه وب از ویژگی هایی همچون Float و Position استفاده میکردند.

مثلا برای اینکه بتونن یک عکس رو در سمت راست صفحه قرار دهند میومدن و از ویژگی Float برای اینکار استفاده میکردند، یا ویژگی Position که باز از طریق اینم میشد اینکارو انجام داد.

مثال از نحوه قرار دادن یک عنصر در سمت راست صفحه با استفاده از ویژگی Float :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
 
img{
float:right;
}
 
</style>
1
2
3
4
5
6
7
<style>
img{
float:right;
}
</style>

 

مثال از نحوه قرار دادن یک عنصر در سمت راست صفحه با استفاده از ویژگی Position :

1
2
3
4
5
6
7
8
<style>
 
img{
position:absolute;
right:10px;
}
 
</style>

 

در مثال بالا ما فقط تصویر داشتیم و اونو به راحتی با استفاده از ویژگی های Float و Position در سمت راست صفحه منتقل کردیم، ولی خب شاید ما چندین تصویر و کلی عنصر دیگه داشته باشیم اونجاست که دیگه واقعا Float و Position اذیت کننده میشن و غیر قابل تحمل.

پس در کل ماژولی همچون فلکس باکس یا Flexbox در CSS3 اومده تا یه انقلاب در حوزه طرح بندی صفحات وب ایجاد کند و همچنین اومده تا کار طراحان وب را خیلی راحتتر کند.

آموزش کامل فلکس باکس یا Flexbox در CSS3

خب در ادامه میخوام شمارو بطور کامل با فناوری جذاب فلکس باکس یا FlexBox در CSS3 آشنا کنم، لطفا در ادامه و تا پایان این جلسه با من همراه باشید.

++ اولین مرحله برای استفاده از فلکس باکس

در اولین مرحله برای استفاده از فلکس باکس اینه که شما یک ظرف یا ( کانتینر یا Container ) با حالت نمایش فلکس ایجاد نمایید، بعد از اون ما میتونیم از ویژگی های مرتبط با فلکس بروی ظرف یا کانتینری که ایجاد کردیم استفاده نماییم.

پس برای اینکه حالت نمایش یک تگ ( که میخوایم مثه یه ظرف باشه برامون ) بصورت Flex یا فلکس باشد ما باید از ویژگی Display با مقدار Flex استفاده نماییم.

1
2
3
div.container{
display:flex;
}

 

بعد از این دیگه میتونیم از ویژگی هایی که فلکس باکس در اختیارمون گذاشته بروی ظرف یا Container که ایجاد کردیم استفاده نماییم.

توجه داشته باشید که هر از ویژگی های زیر تنها در صورتی عمل خواهند کرد که ویژگی display عنصر والد یا پدر ( یا همون ظرف یا کانتینر یا Container ) بروی flex تنظیم شده باشد.

از ویژگی های زیر فقط باید در عنصر والد یا پدر که حالت نمایشش فلکس می باشد استفاده کرد.

در ادامه میخوایم با ویژگی هایی که مرتبط با فلکس باکس می باشند آشنا شویم و باهاشون کار کنیم :

  • Flex-Direction : جهت قرار گیری آیتم ها را مشخص میکند
  • Flex-Wrap : نحوه شکسته شدن آیتم ها را مشخص میکند
  • Flex-Flow : برای خلاصه نویسی ۲ ویژگی بالا
  • Justify-Content : برای تراز آیتم ها بصورت افقی
  • Align-Items : برای تراز آیتم ها بصورت عمودی
  • Align-Content : برای تراز عمودی چندین خط از آیتم ها

کار با ویژگی Flex-Direction در CSS3

با استفاده از ویژگی flex-direction میتوان جهت قرار گیری یا نحوه نمایش آیتم های موجود در یک کانتینر را مشخص کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • Row : گزینه پیش فرض – نمایش آیتم ها بصورت افقی
  • Row-Reverse : نمایش آیتم ها بصورت افقی ولی معکوس
  • Column : نمایش آیتم ها بصورت عمودی
  • Column-Reverse : نمایش آیتم ها بصورت عمودی ولی معکوس

مثال شماره ۱ : استفاده از حالت Row-Reverse

1
2
3
4
div.container{
display: flex;
flex-direction: row-reverse;
}

 

مثال شماره ۲ : استفاده از حالت Column

1
2
3
4
div.container{
display: flex;
flex-direction: column;
}

 

مثال شماره ۳ : استفاده از حالت Column-Reverse

1
2
3
4
div.container{
display: flex;
flex-direction: column-reverse;
}

 

کار با ویژگی Flex-Warp در CSS3

با استفاده از ویژگی flex-wrap در فلکس باکس یا Flexbox در CSS3 میتوان مشخص کرد که در صورت نیاز آیتم ها شکسته شود و به سطر بعدی بروند.

این ویژگی مقادیر زیر را می پذیرد :

  • Nowrap : بصورت پیش فرض این گزینه می باشد
  • Wrap : در صورت نیاز آیتم ها شکسته و به سطر بعدی میروند
  • Wrap-Reverse : در صورت نیاز آیتم ها شکسته و بصورت معکوس نمایش داده می شوند

مثال شماره ۱ : حالت Wrap

1
2
3
4
5
div.container{
width:110px;
display:flex;
flex-wrap: wrap;
}

 

مثال شماره ۲ : حالت Wrap-Reverse

1
2
3
4
5
div.container{
width:110px;
display:flex;
flex-wrap: wrap-reverse;
}

 

کار با ویژگی Flex-Flow در CSS3

در ادامه آموزش فلکس باکس یا Flexbox در CSS3 میخواهیم با ویژگی flex-flow آشنا شویم ، این ویژگی در واقع یک ویژگی برای خلاصه نویسی ویژگی های flex-direction و flex-wrap می باشد.

شکل کلی برای استفاده از این ویژگی بصورت زیر می باشد :

1
flex-flow: flex-direction|flex-wrap;

 

مثال :

1
2
3
4
5
div.container{
width:110px;
display:flex;
flex-flow: row-reverse wrap;
}

 

کار با ویژگی Justify-Content در CSS3

با استفاده از ویژگی justify-content میتوان موقعیت قرار گیری یا تراز آیتم ها را بصورت افقی مشخص کرد.

از مقادیر زیر میتوان در این ویژگی استفاده کرد :

  • Flex-Start : بصورتپ پیش فرض این گزینه می باشد
  • Flex-End : آیتم ها در قسمت پایانی ظرف قرار میگیرند
  • Center : آیتم ها در وسط ظرف قرار میگیرند
  • Space-Between : یک فاصله مشخص در بین آیتم ها ایجاد میکند
  • Space-Around : یک فاصله مشخص در اطراف آیتم ها ایجاد میکند

مثال شماره ۱ : حالت Flex-End

1
2
3
4
div.container{
display:flex;
justify-content: flex-end;
}

 

مثال شماره ۲ : حالت Center

1
2
3
4
div.container{
display:flex;
justify-content: center;
}

 

مثال شماره ۳ : حالت Space-Between

1
2
3
4
5
6
7
8
9
10
11
12
div.container{
display:flex;
justify-content: space-between;
}
1
2
3
4
div.container{
display:flex;
justify-content: space-between;
}

 

مثال شماره ۴ : حالت Space-Around

1
2
3
4
div.container{
display:flex;
justify-content: space-around;
}

 

کار با ویژگی Align-Items در CSS3

همانطور که از اسم این ویژگی مشخصه ، با استفاده از آن میتوان تراز آیتم های موجود در ظرف یا همون Container را بصورت عمودی مشخص کرد.

از بین مقادیر این ویژگی مقداری هست به اسم BaseLine که شاید نحوه عملکرد این مقدار کمی براتون عجیب یا غیرقابل درک باشه، به همین دلیل تصویر زیر رو براتون آماده کردم ، اگه بهش نگاه کنید میتونید قشنگ متوجه شوید که منظور از BaseLine چیه.

خب BaseLine در ظاهر دقیقا شبیه مقدار Flex-Start می باشد ولی در عملکرد کاملا فرق میکنند، مقدار Flex-Start نقطه ی شروع ظرف می باشد ولی مقدار BaseLine نقطه پایه یا ریشه ی متن می باشد.

در نتیجه در مقدار BaseLine اگه ما اندازه فونت آیتم هامون رو بزرگ و کوچک کنیم میتونیم قشنگ متوجه شیم که خط پایه متن چیه.

نمونه تصویر برای درک بهتر مقدار Flex-Start

آموزش کامل فلکس باکس یا Flexbox در CSS3

نمونه تصویر برای درک بهتر مقدار BaseLine

آموزش کامل فلکس باکس یا Flexbox در CSS3

از مقادیر زیر میتوان در این ویژگی استفاده نمود :

  • Stretch : بصورت پیش فرض این گزینه می باشد
  • Center : آیتم ها بصورت عمودی در وسط ظرف قرار میگیرند
  • Flex-Start : آیتم ها بصورت عمودی در قسمت ابتدایی یا شروع ظرف قرار میگیرند
  • Flex-End : آیتم ها بصورت عمودی در قسمت پایانی ظرف قرار میگیرند
  • BaseLine : آیتم ها به نسبت خط پایه متن تراز می شوند

مثال شماره ۱ : حالت Center

1
2
3
4
5
6
div.container{
width:170px;
height:300px;
display:flex;
align-items: center;
}

 

مثال شماره ۲ : حالت Flex-Start

1
2
3
4
5
6
div.container{
width:170px;
height:300px;
display:flex;
align-items: flex-start;
}

 

مثال شماره ۳ : حالت Flex-End

1
2
3
4
5
6
div.container{
width:170px;
height:300px;
display:flex;
align-items: flex-end;
}

 

مثال شماره ۴ : حالت Baseline

1
2
3
4
5
6
div.container{
width:170px;
height:300px;
display:flex;
align-items: baseline;
}

 

کار با ویژگی Align-Content در CSS3

این ویژگی تاثیر مستقیم روی ویژگی Flex-Wrap  میگذارد ، این ویژگی شبیه ویژگی Align-Items می باشد ولی با این تفاوت که این ویژگی بروی آیتم های چند خطی ( وقتی که شکسته میشن و به سطر جدید میرن ) اثر میگذارد.

از مقادیر زیر میتوان در این ویژگی استفاده نمود :

  • Stretch : گزینه پیش فرض می باشد
  • Center
  • Flex-Start
  • Flex-End
  • Space-Between
  • Space-Around

بیشتر بخوانیم:

  • آموزش کامل کار با Box Sizing در CSS3
  • نحوه کار با انیمیشن ها یا Animations در CSS3
  • کار با ویژگی Transforms در CSS3
  • نحوه کار با فرم ها در CSS
  • آموزش کار با عناصر Block و Inline در CSS
اشتراک گذاری:
برچسب ها: CSS3Flexboxآموزشآموزش CSSآموزش css pdfآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css و htmlآموزش css3آموزش css3 pdfآموزش css3 پیشرفتهآموزش css3 رایگانآموزش Flexboxاموزش رایگان Flexboxفلکس باکس
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

لوگو ادمین سایت

آموزش انیمیشن‌سازی با CSS

در این قسمت از آموزش انیمشن‌سازی در CSS قصد داریم به طور کلی به آموزش...
همیارمن

نحوه اضافه کردن کد PHP در وردپرس

اگر به دنبال اضافه کردن کد php در وردپرس به صفحات در وردپرس هستید به...

دوره رایگان طراحی فروشگاه اینترنتی!

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

آموزش ایجاد لیست کشویی وابسته به هم در HTML

در این مقاله در همیار من قصد داریم یکی از مطالب بسیار مهم و کاربردی...
ترفندهای عکاسی حرفه‌ای با موبایل (ساده و بدون هزینه!)

ساده و بدون هزینه ترفند های عکاسی حرفه ای با موبایل را یاد بگیرید

یکی از وسایلی که امروزه تقریبا با همه ما همراه شده است و ساعت‌ها آن...
لوگو ادمین سایت

DOM چیست و چه کاربردی دارد؟

DOM عبارتی است که بیشتر آنرا در زبان جاوا اسکریپت می‌شنویم. در این مقاله در...

دیدگاهتان را بنویسید لغو پاسخ

جستجو در همیارمَن
جستجو برای:
  • آموزش مجازی
  • اخبار سینما
  • افزونه وردپرس
    • آموزش افزونه وردپرس
  • بازی
  • پیشنهادی
  • دسته‌بندی نشده
  • دوره های رایگان
  • سریال
  • فناوری
  • فیلم
    • اکشن
    • تاریخی
    • ترسناک
    • جنایی
    • کمدی
    • مستند
    • معمایی
    • هیجان انگیز
    • ورزشی
  • قالب HTML
  • قالب وردپرس
    • قالب خبری و وبلاگ
    • قالب شرکتی
    • قالب نمونه کار
    • قالب های چند منظوره
  • مقالات
    • بازایابی دیجیتال
    • برنامه نویسی
    • تولید و بازاریابی محتوا
    • طراحی و گرافیک
آخرین مطالب سایت
  • آموزش انیمیشن‌سازی با CSS
  • بهترین فیلم های اسلشر تاریخ سینما
  • نقد فیلم Cure – یک فیلم هیپنوتیزم کننده
  • نقد فیلم یتیم Orphan: First Kill
  • کسب درآمد از آموزش آنلاین چگونه است؟
برچسب‌ها
CSS HTML آموزش آموزش CSS آموزش css3 آموزش css3 pdf آموزش css3 رایگان آموزش css3 پیشرفته آموزش css pdf آموزش css حرفه ای آموزش css و html آموزش css پروژه محور آموزش css پیشرفته آموزش افزونه وردپرس آموزش تولید محتوا آموزش رایگان html همیارمن آموزش رایگان زبان html آموزش وب سایت افزونه وردپرس بازاریابی بازاریابی دیجیتال بازی بررسی بررسی بازی تولید محتوا دانلود افزونه وردپرس دانلود قالب وردپرس دوره دوره رایگان دیجیتال مارکتینگ سایت فناوری فیلم قالب قالب سایت قالب وب سایت قالب وردپرس نقد نقد بازی نقد فیلم نقد و بررسی نقد و بررسی بازی نقد و بررسی فیلم وردپرس ووکامرس

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت