خانه آموزش CSS آموزش CSS پیشرفته آموزش کامل فلکس باکس یا Flexbox در CSS3

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

توسط

۱۳۹۸-۰۹-۲۰

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کامل فلکس باکس یا Flexbox در CSS3 با من همراه باشید.

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

Free-Learn

آنچه در این جلسه میخوانید :

1 تعریف فلکس باکس یا Flexbox
2 آموزش کامل فلکس باکس یا Flexbox در CSS3
3 کار با ویژگی Flex-Direction در CSS3
4 کار با ویژگی Flex-Warp در CSS3
5 کار با ویژگی Flex-Flow در CSS3
6 کار با ویژگی Justify-Content در CSS3
7 کار با ویژگی Align-Items در CSS3
8 کار با ویژگی Align-Content در CSS3
9 آشنایی با دیگر ویژگی های مرتبط با Flexbox در CSS3
10 کار با ویژگی Flex-Grow در CSS3
11 کار با ویژگی Flex-Shrink در CSS3
12 کار با ویژگی Flex-Basis در CSS3
13 کار با ویژگی Flex در CSS3
14 کار با ویژگی Align-Self در CSS3
15 کار با ویژگی Order در CSS3
16 عدم پشتیبانی برخی از مرورگرها از ویژگی های Flexbox

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

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

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

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

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

<style>

img{
 float:right;
}

</style>

<style>

img{

float:right;

}

</style>

امتحان کنید

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

<style>

img{
 position:absolute;
 right:10px;
}

</style>

<style>

img{

position:absolute;

right:10px;

}

</style>

امتحان کنید

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

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

Free-Learn

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

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

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

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

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

div.container{
 display:flex;
}

div.container{

display:flex;

}

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

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

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

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

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

Free-Learn

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

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

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

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

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

div.container{
 display: flex;
 flex-direction: row-reverse;
}

div.container{

display: flex;

flex-direction: row-reverse;

}

امتحان کنید

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

div.container{
 display: flex;
 flex-direction: column;
}

div.container{

display: flex;

flex-direction: column;

}

امتحان کنید

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

div.container{
 display: flex;
 flex-direction: column-reverse;
}

div.container{

display: flex;

flex-direction: column-reverse;

}

امتحان کنید

Free-Learn

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

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

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

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

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

div.container{
 width:110px;
 display:flex;
 flex-wrap: wrap;
}

div.container{

width:110px;

display:flex;

flex-wrap: wrap;

}

امتحان کنید

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

div.container{
 width:110px;
 display:flex;
 flex-wrap: wrap-reverse;
}

div.container{

width:110px;

display:flex;

flex-wrap: wrap-reverse;

}

امتحان کنید

Free-Learn

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

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

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

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

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

flex-direction
flex-wrap

مثال :

div.container{
 width:110px;
 display:flex;
 flex-flow: row-reverse wrap;
}

div.container{

width:110px;

display:flex;

flex-flow: row-reverse wrap;

}

امتحان کنید

Free-Learn

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

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

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

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

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

div.container{
 display:flex;
 justify-content: flex-end;
}

div.container{

display:flex;

justify-content: flex-end;

}

امتحان کنید

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

div.container{
 display:flex;
 justify-content: center;
}

div.container{

display:flex;

justify-content: center;

}

امتحان کنید

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

div.container{
 display:flex;
 justify-content: space-between;
}

div.container{

display:flex;

justify-content: space-between;

}

امتحان کنید

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

div.container{
 display:flex;
 justify-content: space-around;
}

div.container{

display:flex;

justify-content: space-around;

}

امتحان کنید

Free-Learn

کار با ویژگی 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

div.container{
 width:170px;
 height:300px;
 display:flex;
 align-items: center;
}

div.container{

width:170px;

height:300px;

display:flex;

align-items: center;

}

امتحان کنید

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

div.container{
 width:170px;
 height:300px;
 display:flex;
 align-items: flex-start;
}

div.container{

width:170px;

height:300px;

display:flex;

align-items: flex-start;

}

امتحان کنید

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

div.container{
 width:170px;
 height:300px;
 display:flex;
 align-items: flex-end;
}

div.container{

width:170px;

height:300px;

display:flex;

align-items: flex-end;

}

امتحان کنید

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

div.container{
 width:170px;
 height:300px;
 display:flex;
 align-items: baseline;
}

div.container{

width:170px;

height:300px;

display:flex;

align-items: baseline;

}

امتحان کنید

Free-Learn

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

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

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

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

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

div.container{
 flex-wrap: wrap;
 display:flex;
 align-content: center;
}

div.container{

flex-wrap: wrap;

display:flex;

align-content: center;

}

امتحان کنید

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

div.container{
 flex-wrap: wrap;
 display:flex;
 align-content: flex-start;
}

div.container{

flex-wrap: wrap;

display:flex;

align-content: flex-start;

}

امتحان کنید

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

div.container{
 flex-wrap: wrap;
 display:flex;
 align-content: flex-end;
}

div.container{

flex-wrap: wrap;

display:flex;

align-content: flex-end;

}

امتحان کنید

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

div.container{
 flex-wrap: wrap;
 display:flex;
 align-content: space-between;
}

div.container{

flex-wrap: wrap;

display:flex;

align-content: space-between;

}

امتحان کنید

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

div.container{
 flex-wrap: wrap;
 display:flex;
 align-content: space-around;
}

div.container{

flex-wrap: wrap;

display:flex;

align-content: space-around;

}

امتحان کنید

Free-Learn

آشنایی با دیگر ویژگی های مرتبط با Flexbox در CSS3

خب دوستان تا اینجا بهتون خسته نباشید میگم، شاید یکم طولانی شد این جلسه ، ولی خب باید با آموزش کامل فلکس باکس یا Flexbox در CSS3 آشنا می شدید.

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

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

Flex-Grow : میزان بزرگ بودن یک آیتم را نسبت به دیگر آیتم ها مشخص میکند
Flex-Shrink : میزان کوچک بودن یک آیتم را نسبت به دیگر آیتم ها مشخص میکند
Flex-Basis : یک اندازه پایه را برای آیتم مشخص میکند
Flex : برای خلاصه نویسی ۳ ویژگی بالا
Align-Self : برای تنظیم تراز یک آیتم دلخواه از بین چندین آیتم
Order : ترتیب قرار گیری آیتم ها را مشخص میکند

Free-Learn

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

با استفاده از این ویژگی میتوان مشخص کرد که یک آیتم در ظرف یا همون Container چقد میتواند رشد کند یا بزرگ شود و فضای ظرف را اشغال کند.

مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثله ۴ )

مثال :

.mygrow{
 flex-grow: 3;
}

.mygrow{

flex-grow: 3;

}

امتحان کنید

Free-Learn

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

این ویژگی برعکس ویژگی Flex-Grow عمل میکند و باعث می شود یک آیتم اندازش به نسبت دیگر آیتم ها کوچکتر ( رشد کمتر ) داشته باشد.

مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد. ( مثله ۴ )

مثال :

#main div.myshrink {
 flex-shrink: 3;
}

#main div.myshrink {

flex-shrink: 3;

}

امتحان کنید

Free-Learn

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

با استفاده از این ویژگی نیز میتوان یک اندازه ( سایز ) پایه را برای یک آیتم ( یا چندین آیتم ) مشخص کرد ، مقداری که این ویژگی میپذیرد میتواند با استفاده از واحدهای اندازه گیری ( همچون پیکسل ، درصد و.. ) مشخص شود.

مثال :

#main div.mybasis {
 flex-basis: 180px;
}

#main div.mybasis {

flex-basis: 180px;

}

امتحان کنید

Free-Learn

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

با استفاده از این ویژگی میتوان ۳ ویژگی Flex-Grow و Flex-Shrink و Flex-Basis را بصورت خلاصه نویسی نوشت ، یعنی این ۳ ویژگی را در یک خط کد بصورت خلاصه مینویسیم.

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

flex: flex-grow|flex-shrink|flex-basis;

1	flex: flex-grow\|flex-shrink\|flex-basis;

Flex-Grow
Flex-Shrink
Flex-Basis

مثال شماره ۱ : استفاده فقط از Flex-Grow

#main div.myflex {
 flex: 3;
}

#main div.myflex {

flex: 3;

}

امتحان کنید

مثال شماره ۲ : استفاده از Flex-Grow و Flex-Basis

#main div.myflex {
 flex: 3 120px;
}

#main div.myflex {

flex: 3 120px;

}

امتحان کنید

Free-Learn

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

کمی بالاتر با ویژگی Align-Items آشنا شدیم و دیدیم که با استفاده از این ویژگی میتوان آیتم های یک ظرف یا Container را بصورت عمودی ترازبندی کرد.

حال با استفاده از ویژگی Align-Self میتوان عمل ترازبندی رو فقط بروی یک آیتم انجام داد، یعنی شاید من بخوام یک آیتم را بصورت عمودی در وسط قرار بدم و آیتم دیگری را در پایین ظرف.

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

Stretch
Center
Flex-Start
Flex-End
BaseLine

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

#main div.alignself {
 align-self: center;
}

#main div.alignself {

align-self: center;

}

امتحان کنید

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

#main div.alignself {
 align-self: flex-end;
}

#main div.alignself {

align-self: flex-end;

}

امتحان کنید

Free-Learn

کار با ویژگی Order در CSS3

این ویژگی خیلی باحاله ، با استفاده از این ویژگی میتوان ترتیب قرارگیری آیتم های یک ظرف را مشخص کرد، مثلا میتونیم بگیم آیتم شماره ۲ در جایگاه شماره ۴ قرار بگیرد.

مقداری که این ویژگی میپذیرد یک مقدار عددی می باشد مثله ( ۳ )

مثال :

.order1 {
 order: 4;
}

.order2 {
 order: 3;
}

.order3 {
 order: 2;
}

.order4 {
 order: 1;
}

.order1 {

order: 4;

}

.order2 {

order: 3;

}

.order3 {

order: 2;

}

.order4 {

order: 1;

}

امتحان کنید

Free-Learn

عدم پشتیبانی برخی از مرورگرها از ویژگی های Flexbox

در مثال های بالا حتما دیدید که قبل از دستورات از پیشوندهای -webkit- یا -ms- استفاده شده است، این پیشوندها برای اینه که نسخه های قدیمی تره مرورگرهای اینترنتی از این ویژگی ها بخوبی پشتیبانی کنند.

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

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

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

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	۲۹٫۰	۲۲٫۰	۴۸	۱۰	۱۱٫۰

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

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
دستور پیشوندی	-webkit-	-moz-	-webkit-	-webkit-	-ms-

Free-Learn

خب دوستان خسته نباشید ، به پایان این جلسه ( فلکس باکس یا Flexbox در CSS3 ) رسیدیم، میدونم طولانی شد و شاید خسته کننده.

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

Free-Learn

دریافت PDF یا پرینت این مطلب