آرین تاپ لرن

تاریخ انتشار:۱۱:۲۹ ۱۳۹۸/۱۰/۹

بخش اول – Flexible (flex) Items

ادر قسمت قبل با Flex آشنا شدیم، دیدیم که چطور به کمک آن می‌توانیم لایه‌هایی انعطاف پذیر را به سادگی طرح‌بندی کنیم. با هم خصوصیات و دستورات مربوط به عنصر پدر یعنی Flex Container را دیدیم. امروز باهم در مورد Flex Itemها صحبت می کنیم و می‌بینیم که چه خصوصیاتی برای آنها وجود دارد و به چه شکلی استفاده می‌شود.

بعد از آشنایی با Flex Container نوبت به معرفی فرزندان اولین سطح آن می‌رسد. به فرزندان مستقیم Flex Container اصطلاحا Flex Item گفته می‌شود. به کد زیر دقت کنید:

1. <"div class= "flex-container >
2. <div > 1 </div >
3. <div > 2 </div >
4. <div > 3 </div >
5. <div > 4 </div >
6. <div />

باکس‌های آبی رنگ که کادر طوسی (Flex Container) رنگ آنها را احاطه کرده است Flex Itemها هستند.

۱- دستورات مربوط به Flex Itemها
در اینجا ما دستورات زیر را با هم بررسی می‌کنیم.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

۲- دستور order

به صورت پیشفرض Flex Itemها به همان ترتیبی که در کد نوشته می‌شوند، در کادر Flex Container ظاهر می‌شوند. در قسمت قبل دیدم که می‌توان این ترتیب را با دستور Reverse معکوس کرد. اما اگر نخواهیم معکوس سازی انجام بدیم و بخواهیم به ترتیب خاصی که مد نظر ماست آیتم‌ها نمایش داده شوند، چکار باید بکنیم؟ راه حل استفاده از دستور Order است که به کمک آن می‌توان مشخص کرد که به چه ترتیبی آیتم‌ها چیده شوند.

1. <"div class= "flex-container >
2. <div style= "order: 3" > 1 </div >
3. <div style= "order: 2" > 2 </div >
4. <div style= "order: 4" > 3 </div >
5. <div style= "order: 1" > 4 </div >
6. <div />

همانگونه که مشاهده می کنید عنصر اول در جایگاه سوم قرار گرفته است.

۳- دستور Flex-Grow

این دستور توانایی رشد یک Flex Item را زمانی که فضا برای رشد وجود داشته باشد، نشان می‌دهد.این خاصیت یک مقدار دریافت می‌کند و طول آیتم‌ها را به نسبت مقداری که دریافت کرده مقدار دهی می‌کند. به عنوان مثال، اگر همه آیتم‌ها مقدار ۱ را برای Flex-Grow داشته باشند،مقدار فضای Container به اندازه مساوی بین آنها تقسیم می‌شود. اگر یک آیتم مقدار ۲ را بگیرد، این آیتم دو برابر فضای بیشتری را نسبت به دیگران می‌گیرد.

1. <"div class= "flex-container >
2. <div style= "flex-grow: 1" > 1 </div >
3. <div style= "flex-grow: 1" > 2 </div >
4. <div style= "flex-grow: 2" > 3 </div >
5. <div/ >

همانگونه که می‌بینید باکس شماره ۳ فضای بیشتری نسبت به دو باکس دیگر اشغال کرده است.

۴- دستور Flex-Shrink

دستور Flex-Shrink مربوط به کوچک شدن یک عنصر هنگامی که فضا به اندازه کافی وجود نداشته باشد، را بیان می‌کند. مقدار پیشفرض آن یک است. به این معنا که در یک Flex Container اگر فضای کافی وجود نداشته باشد طول همه Flex Itemها به یک نسبت کم می‌شود.اگر مقدار را برابر با صفر بزاریم مقدار طول عنصر ما کاهش پیدا نمی‌کند. ولی اگر بیشتر از یک باشد به همان نسبت کوچک می‌شوند و فضا بین سایر عناصر تقسیم می‌شود.

1. <"div class= "flex-container>
2. <div > 1 </div >
3. <div > 2 </div >
4. <div style= "flex-shrink: 0" > 3 </div >
5. <div > 4 </div >
6. <div > 5 </div >
7. <div > 6 </div >
8. <div > 7 </div >
9. <div > 8 </div >
10. <div > 9 </div >
11. <div > 10 </div >
12. <div />

۵- دستور Flex-Basis

دستور فوق برای مقدار دهی اولیه به عناصر ما در Flex Container می‌باشند وابسته به جهت چینش عناصر در Flex Container این مقدار می‌تواند یا به ارتفاع اشاره کند و یا طول عنصر. و بیان گر مقدار اولیه طول یا ارتفاع عنصرهایی است که در flex container قرار می‌گیرند.

1. <"div class= "flex-container >
2. <div > 1 </div >
3. <div > 2 </div >
4. <div style= "flex-basis: 200px" > 3 </div >
5. <div > 4 </div >
6. <div/ >

۶- دستور Flex

این دستور کوتاه شده‌ی ۳ دستور قبلی یعنی Flex-Grow،Flex-Shrink و Flex-Basisاست که به صورت زیر می‌توان از آن استفاده کرد.

1. <"div class= "flex-container >
2. <div > 1 </div >
3. <div > 2 </div >
4. <div style= "flex: 0 0 200px" > 3 </div >
5. <div > 4 </div >
6. <div/ >

۷- دستور Align-Self

این دستور مشخص کننده نحوه تراز بندی عناصری است که داخل Flex Container قرار دارند. وقی از این دستور استفاده می‌کنید تراز بندی پیشفرض و تراز بندی را که Flex Container برای فرزندانش تنظیم کرده است را بازنویسی می‌کنید.

1. <"div class= "flex-container >
2. <div > 1 </div >
3. <div style= "align-self: flex-start" > 2 </div >
4. <div style= "align-self: flex-end" > 3 </div >
5. <div > 4 </div >
6. <div/ >

بخش دوم – Flex Box در BootStrap 4

 ۸- Flex Box در Bootstrap 4

یکی از تغییرات مهمی که در bootstrap 4 رخ داده است، استفاده از flex به جای float بود. با استفاده از flex می‌توان به سادگی لایه‌های واکنشگرا را طراحی نمود بدون اینکه نیاز به استفاده از Position و یا Float باشد.

برای تعریف یک Flex Container از کلاس d-flex استفاده می‌کنیم. با اینکار تمامی فرزندان اول آن Flex Item محسوب می‌شوند.

1. <"div class= "d-flex p-3 bg-secondary text-white >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

۹- جهت چینش آیتم‌ها
برای اینکه نحوه چینش آیتم‌ها را مشخص کنیم می‌توانیم از کلاس‌های Flex-Row و Flex-Column استفاده می‌کنیم و همچنین اگر به انتهای این‌ها Reverse اضافه کنیم (Flex-Row-Reverse , Flex-Column-Reverse)، چهت چینش آیتم‌ها معکوس می‌شود.

1. <"div class= "d-flex flex-row bg-secondary >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div />

1. <"div class= "d-flex flex-row-reverse bg-secondary >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div />

1. <"div class= "d-flex flex-column >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

1. <"div class= "d-flex flex-column-reverse >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

۱۰- کلاس Justify-Content

برای مشخص کردن نحوه تراز بندی آیتم‌ها از کلاس Justify-Content-* استفاده می‌کنیم. به جای ستاره می‌توان هر یک از مقادیر Start, End, Center, Between و Around

1. <"div class= "d-flex justify-content-start >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div />

1. <"div class= "d-flex justify-content-end >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div />

1. <"div class= "d-flex justify-content-center >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

1. <"div class= "d-flex justify-content-between >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

1. <"div class= "d-flex justify-content-around>
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

۱۱- کلاس Flex-Fill

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

1. <"div class= "d-flex >
2. <div class= "p-2 bg-info flex-fill" > Flex item 1 </div >
3. <div class= "p-2 bg-warning flex-fill" > Flex item 2 </div >
4. <div class= "p-2 bg-primary flex-fill" > Flex item 3 </div >
5. <div/ >

۱۲- کلاس Flex Grow

همانطور که دیدیم می توان میزان رشد آیتم‌ها را زمانی که فضا به اندازه کافی موجود باشد، کنترل کرد. در Bootstrap برای اینکار از کلاس Flex-Grow-1 استفاده می‌کنیم.

1. <"div class= "d-flex >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary flex-grow-1" > Flex item 3 </div >
5. <div/ >

هم چنین برای کوچک شدن یک آیتم می‌توانیم از کلاس Felx-Shrink استفاده کنیم. در این حالت اگر فضای کافی برای فرزندان وجود نداشته باشند به یک نسبت شروع به کوچک شدن می‌کنند که با تنظیم مقدار Shrink می‌توان تصمیم گرفت که این کوچک شدن به چه صورتی باشد.

Felx-Shrink-0: فرزندی که این کلاس را دریافت می‌کند، کوچک نمی‌شود.

Felx-Shrink-1: همه فرزندان به یک نسبت کوچک می‌شوند.

۱۳- کلاس Order

برای تغییر نحوه چینش فرزندان درون Flex Container می‌توان از کلاس Order استفاده کرد. با اعدادی که در دستور order نوشته می شوند، اولویت نمایش فرزندان مشخص می شود.بازه ی قابل قبول برای این اعداد از ۰ تا ۱۲ می باشد.

1. <"div class= "d-flex bg-secondary >
2. <div class= "p-2 bg-info order-3" > Flex item 1 </div >
3. <div class= "p-2 bg-warning order-2" > Flex item 2 </div >
4. <div class= "p-2 bg-primary order-1" > Flex item 3 </div >
5. <div/ >

۱۴- کلاس مقدار خودکار Margin

به سادگی می‌توان margin فرزندان را می توان با دستورات .mr-auto و .ml-auto تغییر داد.و تعیین کرد که مقدار خودکار Margin در چه سمتی قرار بگیرد.

1. <"div class= "d-flex bg-secondary >
2. <div class= "p-2 mr-auto bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 bg-primary" > Flex item 3 </div >
5. <div/ >

1. <"div class= "d-flex bg-secondary >
2. <div class= "p-2 bg-info" > Flex item 1 </div >
3. <div class= "p-2 bg-warning" > Flex item 2 </div >
4. <div class= "p-2 ml-auto bg-primary" > Flex item 3 </div >
5. <div />

۱۵- کلاس Flex Wrap

به صورت پیش فرض همه فرزندان در یک سطر نمایش داده می‌شوند ولی اگر مقدار طول Flex Container به اندازه کافی برزگ نباشد آنها شکسته نمی‌شوند بلکه به یک اندازه کوچک می‌شوند. کلاس Flex-Nowrap بیانگر این حالت است ولی اگر بخواهیم که در چند سطر نمایش داده شوند می‌توانیم از کلاس Flex-Wrap استفاده کنیم.

1. <div class= "d-flex flex-wrap align-content-around" > . . </div >

۱۶- کلاس Align Content

این کلاس وضعیت قرار گیری سطرهای (Content) یک Flex Container به صورت عمودی نسبت به هم را نمایش می‌دهد. به صورت پیشفرض مقدار آن Align-Content-Start است ولی می‌تواند مقادیر

• Align-Content-End
• Align-Content-Center
• Align-Content-Between
•  Align-Content-Around
•  Align-Content-Stretch

1. <div class= "d-flex flex-wrap align-content-start" > . . </div >

1. <div class= "d-flex flex-wrap align-content-end" > . . </div >

1. <div class= "d-flex flex-wrap align-content-center" > . . </div >

1. <div class= "d-flex flex-wrap align-content-around" > . . </div >

1. <div class= "d-flex flex-wrap align-content-stretch" > . . </div >

۱۷- Align Items

این کلاس نحوه قرارگیری آیتم‌های درون یک سطر را مشخص می‌کند. برای کلاس Align-Items می‌توان از مقدیر زیر استفاده کرد. به صورت پیشفرض برای Flex Container این مقدار برابر با Align-Items-Stretch می‌باشد.

• Align-Items-Start
• Align-Items-End
• Align-Items-Center
• Align-Items-Baseline
• Align-Items-Stretch

1. <div class= "d-flex align-items-start" > . . </div >

1. <div class= "d-flex align-items-end" > . . </div >

1. <div class= "d-flex align-items-center" > . . </div >

1. <div class= "d-flex align-items-baseline" > . . </div >

1. <div class= "d-flex align-items-stretch" > . . </div >

۱۸- کلاس Align Self

اگر یکی از آیتم‌ها بخواهد خصوصیت Align خود را تغییر دهد و از مقداری که Flex Container برایش تعیین کرده است را بازنویسی کند، از دستور Align-Self استفاده می‌کند. این دستور هم همانند دستور قبلی مقادیر زیر را دارد و مقدار آن به صورت پیشفرض برابر با Align-Self-Stretch می‌باشد.

•  Align-Self-Start
•  Align-Self-End
•  Align-Self-Center
•  Align-Self-Baseline
•  Align-Self-Stretch

1. <"div class= "d-flex bg-light" style= "height:150px >
2. <div class= "p-2 border" > Flex item 1 </div >
3. <div class= "p-2 border align-self-start" > Flex item 2 </div >
4. <div class= "p-2 border align-self-end" > Flex item 3 </div >
5. <div/ >

منبع:nikamooz