این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کامل فلکس باکس یا Flexbox در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل فلکس باکس یا Flexbox در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 تعریف فلکس باکس یا Flexbox
- 2 آموزش کامل فلکس باکس یا Flexbox در CSS3
- 3 کار با ویژگی Flex-Direction در CSS3
- 4 کار با ویژگی Flex-Warp در CSS3
- 5 کار با ویژگی Justify-Content در CSS3
- 6 کار با ویژگی Align-Items در CSS3
- 7 کار با ویژگی Align-Content در CSS3
- 8 آشنایی با دیگر ویژگی های مرتبط با Flexbox در CSS3
- 9 کار با ویژگی Flex-Grow در CSS3
- 10 کار با ویژگی Flex-Shrink در CSS3
- 11 کار با ویژگی Flex-Basis در CSS3
- 12 کار با ویژگی Align-Self در CSS3
- 13 کار با ویژگی Order در CSS3
- 14 مثال های بیشتر
تعریف فلکس باکس یا Flexbox
بطور کلی بدونید فلکس باکس یا به انگلیسی FlexBox یک ماژول یا یک تکنیک برای طرح بندی یا Layout بندی عناصر در یک صفحه وب می باشد، که با استفاده از آن میتوان طراحی انعطاف پذیر تری داشته باشیم.
قبلا ( یعنی قبل از اینکه FlexBox به وجود بیاد ) طراحان وب برای قالب بندی یا طرح بندی یک صفحه وب از ویژگی هایی مثه Float و Position و یا جدول ها استفاده میکردند، که باز ویژگی float بیشترین کاربرد رو برای طرح بندی صفحات وب داشت.
مثلا برای اینکه بتونن یک عکس رو در سمت راست صفحه قرار بدن میومدن و از ویژگی Float برای اینکار استفاده میکردند، حالا نه فقط عکس، بلکه هرچیز دیگه رو میشه با float در سمت راست یا چپ قرار دارد.
مثال شماره ۱ : قرار دادن عکس در سمت راست با استفاده از ویژگی Float
|
1 2 3 |
.image1{ float:left; } |
Free-Learn
آموزش کامل فلکس باکس یا Flexbox در CSS3
خب در ادامه میخوام شمارو بطور کامل با فناوری / تکنیک جذاب فلکس باکس یا FlexBox در CSS3 آشنا کنم، لطفا در ادامه و تا پایان این جلسه با من همراه باشید.
- پیشنهاد میکنم لیست تمامی ویژگی های مرتبط با فلکس باکس را مشاهده نمایید
برای استفاده از فلکس باکس در یک صفحه باید ۲ تا کارو انجام بدیم :
- ایجاد یک ظرف فلکس باکس برای نگهداری آیتم ها
- ایجاد آیتم ها در درون ظرف فلکس باکس
ایجاد یک ظرف فلکس باکس برای نگهداری آیتم ها
در اولین مرحله برای استفاده از فلکس باکس اینه که شما یک ظرف یا ( کانتینر یا Container ) با حالت نمایش فلکس ایجاد نمایید، بعد از اون ما میتونیم از ویژگی های مرتبط با فلکس بروی ظرف یا کانتینری که ایجاد کردیم استفاده نماییم.
پس برای اینکه حالت نمایش یک تگ ( که میخوایم مثه یه ظرف باشه برامون ) بصورت Flex یا فلکس باشه ما باید از ویژگی Display با مقدار Flex استفاده نماییم.
|
1 2 3 |
.MyContainer{ display: flex; } |
بعد از اون دیگه میتونیم از ویژگی هایی که فلکس باکس در اختیارمون گذاشته بروی ظرف یا Container که ایجاد کردیم استفاده نماییم.
ایجاد آیتم ها در درون ظرف فلکس باکس
|
1 2 3 4 5 6 |
<div class="MyContainer"> <div class="MyItem">1</div> <div class="MyItem">2</div> <div class="MyItem">3</div> <div class="MyItem">4</div> </div> |
Free-Learn
توجه داشته باشید که هر از ویژگی های زیر تنها در صورتی عمل خواهند کرد که ویژگی display تگ ( همون ظرف یا کانتینر ) بروی flex تنظیم شده باشد.
از ویژگی های زیر فقط باید در عنصر والد یا پدر که حالت نمایشش فلکس می باشد استفاده کرد.
خب دوستان در ادامه آموزش کامل فلکس باکس یا Flexbox در CSS3 میخوایم با ویژگی هایی که مرتبط با فلکس باکس می باشند آشنا شویم و باهاشون کار کنیم :
- Flex-Direction : جهت قرار گیری آیتم ها
- Flex-Wrap : نحوه شکسته شدن آیتم ها
- Justify-Content : برای تراز آیتم ها بصورت افقی
- Align-Items : برای تراز آیتم ها بصورت عمودی
- Align-Content : برای تراز عمودی چندین سطر از آیتم ها
Free-Learn
کار با ویژگی Flex-Direction در CSS3
با استفاده از ویژگی flex-direction میتوان جهت قرار گیری آیتم هارو مشخص کرد.
- Row : گزینه پیش فرض – نمایش آیتم ها بصورت افقی
- Row-Reverse : نمایش آیتم ها بصورت افقی ولی برعکس
- Column : نمایش آیتم ها بصورت عمودی
- Column-Reverse : نمایش آیتم ها بصورت عمودی ولی برعکس
مثال شماره ۱ : استفاده از مقدار Row ( بطور پیش فرض خودش این مقدارو داره )
|
1 2 3 4 |
.MyContainer{ display: flex; flex-direction: row; } |
مثال شماره ۲ : استفاده از مقدار Row-Reverse
|
1 2 3 4 |
.MyContainer{ display: flex; flex-direction: row-reverse; } |
مثال شماره ۳ : استفاده از مقدار Column
|
1 2 3 4 |
.MyContainer{ display: flex; flex-direction: column; } |
مثال شماره ۴ : استفاده از مقدار Column-Reverse
|
1 2 3 4 |
.MyContainer{ display: flex; flex-direction: column-reverse; } |
Free-Learn
کار با ویژگی Flex-Warp در CSS3
با استفاده از ویژگی flex-wrap میتوان مشخص کرد که آیتم ها اگه تعدادشون زیاد بود در صورت لزوم آیتم ها شکسته و به سطر جدید بروند.
- Nowrap : گزینه پیش فرض
- Wrap : آیتم ها شکسته و به سطر بعدی میروند
- Wrap-Reverse : آیتم ها شکسته و بصورت برعکس نمایش داده می شوند
مثال شماره ۱ : استفاده از مقدار NoWarp ( بطور پیش فرض خودش این مقدارو داره )
|
1 2 3 |
.MyContainer{ flex-wrap: nowrap; } |
مثال شماره ۲ : استفاده از مقدار Wrap
|
1 2 3 |
.MyContainer{ flex-wrap: wrap; } |
مثال شماره ۳ : استفاده از مقدار Wrap-Reverse
|
1 2 3 |
.MyContainer{ flex-wrap: wrap-reverse; } |
Free-Learn
کار با ویژگی Justify-Content در CSS3
با استفاده از ویژگی justify-content میتوان تراز آیتم هارو بصورت افقی مشخص کرد.
- Flex-Start : گزینه پیش فرض
- Flex-End : آیتم ها در قسمت پایانی ظرف قرار میگیرند
- Center : آیتم ها در وسط ظرف قرار میگیرند
- Space-Between : یک فاصله مشخص در بین آیتم ها ایجاد میکند
- Space-Around : یک فاصله مشخص در اطراف آیتم ها ایجاد میکند
مثال شماره ۱ : استفاده از مقدار Flex-End
|
1 2 3 |
.MyContainer{ justify-content: flex-end; } |
مثال شماره ۲ : استفاده از مقدار Center
|
1 2 3 |
.MyContainer{ justify-content: center; } |
مثال شماره ۳ : استفاده از مقدار Space-Between
|
1 2 3 |
.MyContainer{ justify-content: space-between; } |
مثال شماره ۴ : استفاده از مقدار Space-Around
|
1 2 3 |
.MyContainer{ justify-content: space-around; } |
Free-Learn
کار با ویژگی Align-Items در CSS3
با استفاده از ویژگی align-items میتوان تراز آیتم هارو بصورت عمودی مشخص کرد.
از بین مقادیر این ویژگی مقداری هست به اسم BaseLine که شاید نحوه عملکرد این مقدار کمی براتون عجیب یا غیرقابل درک باشه، به همین دلیل تصویر زیر رو براتون آماده کردم ، اگه بهش نگاه کنید میتونید قشنگ متوجه شوید که منظور از BaseLine چیه.
خب BaseLine در ظاهر دقیقا شبیه مقدار Flex-Start می باشد ولی در عملکرد کاملا فرق میکنند، مقدار Flex-Start نقطه ی شروع ظرف می باشد ولی مقدار BaseLine نقطه پایه یا ریشه ی متن می باشد.
در نتیجه در مقدار BaseLine اگه ما اندازه فونت آیتم هامون رو بزرگ و کوچک کنیم میتونیم قشنگ متوجه شیم که خط پایه متن چیه.
نمونه تصویر برای درک بهتر مقدار Flex-Start
نمونه تصویر برای درک بهتر مقدار BaseLine
- Stretch : گزینه پیش فرض
- Center : آیتم ها بصورت عمودی در وسط ظرف
- Flex-Start : آیتم ها بصورت عمودی در قسمت ابتدایی ظرف
- Flex-End : آیتم ها بصورت عمودی در قسمت پایانی ظرف
- BaseLine : آیتم ها به نسبت خط پایه متن تراز می شوند
مثال شماره ۱ : استفاده از مقدار Stretch ( بطور پیش فرض خودش این مقدارو داره )
|
1 2 3 4 |
.MyContainer{ height:200px; align-items: stretch; } |
مثال شماره ۲ : استفاده از مقدار Center
|
1 2 3 4 |
.MyContainer{ height:200px; align-items: center; } |
مثال شماره ۳ : استفاده از مقدار Flex-Start
|
1 2 3 4 |
.MyContainer{ height:200px; align-items: flex-start; } |
مثال شماره ۴ : استفاده از مقدار Flex-End
|
1 2 3 4 |
.MyContainer{ height:200px; align-items: flex-end; } |
مثال شماره ۵ : استفاده از مقدار Baseline
|
1 2 3 4 |
.MyContainer{ height:200px; align-items: baseline; } |
Free-Learn
کار با ویژگی Align-Content در CSS3
این ویژگی موقعی عمل میکنه که آیتم هامون به سطر جدید رفته باشن یعنی اگه از ویژگی Flex-Wrap استفاده شده باشه ، یعنی در واقع تاثیر این ویژگی روی آیتم های چند خطی ( چند سطری ) می باشد.
- Stretch : گزینه پیش فرض
- Center
- Flex-Start
- Flex-End
- Space-Between
- Space-Around
مثال شماره ۱ : استفاده از مقدار Center
|
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: center; } |
مثال شماره ۲ : استفاده از مقدار Flex-Start
|
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: flex-start; } |
مثال شماره ۳ : استفاده از مقدار Flex-End
|
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: flex-end; } |
مثال شماره ۴ : استفاده از مقدار Space-Between
|
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: space-between; } |
مثال شماره ۵ : استفاده از مقدار Space-Around
|
1 2 3 4 5 |
.MyContainer{ height:300px; flex-wrap: wrap; align-content: space-around; } |
Free-Learn
آشنایی با دیگر ویژگی های مرتبط با Flexbox در CSS3
خب دوستان تا اینجا بهتون خسته نباشید میگم، شاید یکم طولانی شد این جلسه ، ولی خب باید با آموزش کامل فلکس باکس یا Flexbox در CSS3 آشنا می شدید.
حال در ادامه آموزش کامل فلکس باکس یا Flexbox در CSS3 میخوام چندین ویژگی دیگه بهتون معرفی کنم که از این ویژگی ها میتونیم بروی آیتم های یک ظرف فلکس استفاده نماییم :
ویژگی های زیر فقط بروی آیتم های یک فلکس باکس عمل میکنند نه خوده ظرف فلکس
- Flex-Grow : میزان رشد / بزرگ شدن آیتم
- Flex-Shrink : میزان کاهش / کوچک شدن آیتم
- Flex-Basis : یک اندازه پایه برای آیتم
- Align-Self : برای تنظیم تراز یک آیتم بصورت دلخواه
- Order : ترتیب قرار گیری آیتم ها را مشخص میکند
Free-Learn
کار با ویژگی Flex-Grow در CSS3
با استفاده از این ویژگی میتوان مشخص کرد که یک آیتم در ظرف یا همون Container چقد میتواند رشد کند یا بزرگ شود و فضای ظرف را اشغال کند.
مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثلا عدد ۴ )
|
1 2 3 |
.MyGrow-3{ flex-grow: 3; } |
Free-Learn
کار با ویژگی Flex-Shrink در CSS3
این ویژگی برعکس ویژگی Flex-Grow عمل میکند و با استفاده از آن میتوان کمترین / حداقل ترین اندازه را برای یک آیتم مشخص کرد.
مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثلا عدد ۴ )
مثال شماره ۱ : در مثال زیر اگه صفحه رو تغییر اندازه بدید ، میبینید که آیتم شماره ۲ به نسبت دیگر آیتم ها کوچکتر نمیشه
|
1 2 3 4 |
.MyShrink{ flex-shrink: 0; background-color:yellow; } |
Free-Learn
کار با ویژگی Flex-Basis در CSS3
با استفاده از این ویژگی نیز میتوان اندازه ( سایز ) پایه آیتم هارو مشخص کرد ، مقداری که این ویژگی میپذیرد میتواند با استفاده از واحدهای اندازه گیری ( همچون پیکسل ، درصد و.. ) مشخص شود.
|
1 2 3 4 5 6 7 |
.MyFlexBasis-1{ flex-basis:120px; } .MyFlexBasis-2{ flex-basis:70px; } |
Free-Learn
کار با ویژگی Align-Self در CSS3
با استفاده از ویژگی Align-Self میتوان ترازبندی یک یا چندین آیتم رو بصورت عمودی مشخص کرد، مثلا شاید من بخوام یک آیتم رو بصورت عمودی در وسط قرار بدم و آیتم دیگری را در پایین ظرف و..
- Stretch
- Center
- Flex-Start
- Flex-End
- BaseLine
مثال شماره ۱ : استفاده از مقدار Center و Flex-End
|
1 2 3 4 5 6 7 |
.MyAlignSelf-1{ align-self: center; } .MyAlignSelf-2{ align-self: flex-end; } |
Free-Learn
کار با ویژگی Order در CSS3
این ویژگی خیلی باحاله ، با استفاده از این ویژگی میتوان ترتیب قرارگیری آیتم های یک ظرف را مشخص کرد، مثلا میتونیم بگیم آیتم شماره ۲ در جایگاه شماره ۴ قرار بگیرد.
مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثلا عدد ۴ )
|
1 2 3 |
.order1 { order: 5; } |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : قرار دادن آیتم در وسط ظرف ( بصورت افقی عمودی دقیقا وسط ظرف )
|
1 2 3 4 5 |
.MyContainer{ height:250px; justify-content: center; align-items: center; } |
مثال شماره ۲ : واکنش گرایی آیتم ها در صفحه نمایش های کوچکتر ( مثه موبایل ) – یعنی در گوشی موبایل آیتم ها میوفتن زیر هم
|
1 2 3 4 5 6 |
/* وقتی عرض صفحه کمتر از 600 پیکسل شد */ @media (max-width: 600px){ .MyContainer{ flex-direction: column; } } |
مثال شماره ۳ : گالری عکس با چینش نامرتب ( یعنی اندازه عکس ها باهمدیگه متفاوته ) + واکنش گرایی
|
1 2 3 4 5 6 7 8 9 10 11 |
.MyContainer{ display: flex; flex-wrap: wrap; padding: 0 4px; } .Seton{ flex: 25%; max-width: 25%; padding: 0 4px; } |
خب دوستان خسته نباشید میگم بهتون به پایان آموزش کامل فلکس باکس یا Flexbox در CSS3 رسیدیم، امیدوارم که مشکل خاصی در این آموزش نداشته باشید.
