آموزش سریع flexbox در css

1. لایه بندی

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

css چندین تکنیک و روش مختلف برای لایه بندی معرفی کرده است که عبارتند از:

• Positioning
• Table layout
• Floats
• Flexbox
• Grid

2. Flexbox

برای لایه بندی از float، table layout، grid و positioning بخاطر مشکلاتی که دارند کمتر استفاده می شود. بنابراین CSS تکنیک جدیدی بنام flexbox را معرفی کرد. flexbox یکی از تکنولوژی های لایه بندی در CSS3 است که به کمک آن به راحتی می توانیم عناصر روی صفحه را کنار هم بچینیم و به عبارتی صفحه را لایه بندی کنیم.

مزایای استفاده از flexbox:

• یادگیری آن بسیار آسان است.
• انعطاف پذیر است.
• واکنش گرا ست (ریسپانسیو)
• جهت چیدمان عناصر را به راحتی می توان تغییر داد.
• مدیریت فضای خالی میان عناصر به راحتی انجام می شود.

bootstrap4 یکی از معروف ترین فریمورک های html , css است که بر پایه flexbox طراحی شده است.

3. ساختار flexbox

لازم است برای استفاده از flexbox عناصر (items) داخل یک container قرار بگیرند. container تگی است که آیتم ها را در خود جای می دهد. 

در ادامه به معرفی خاصیت های flexbox می پردازیم:

4. display

برای فعال کردن flexbox لازم است از خاصیت display استفاده کنیم. این خاصیت نحوه نمایش و رفتار یک المان روی صفحه را مشخص می کند:

.container{
     display : flex | inline-flex 
}

اگر از حالت flex استفاده کنيد، container حالت block level دارد (کل سطر مربوط به خود را اشغال می کند) و اگر از حالت inline-flex استفاده کنيد، مانند تگ هاي inline رفتار مي کند و در کنار تگ container تگ هاي ديگر نيز مي تواند قرار گيرد.

5. direction

با استفاده از اين خاصيت جهت چيدمان عناصر را مي توانيم مشخص کنيم که بصورت سطري باشد يا ستوني.

.container{
   flex-direction : row | row-reverse | column | column-reverse;
}

در حالت سطري (row) بطور پيشفرض چيدمان از چپ به راست مي باشد. اگر بخواهيم از عکس اين حالت استفاده کنيم بايد از row-reverse استفاده کنيم. همچنين در حالت ستوني (column) پيشفرض چيدمان از بالا به پايين است و اگر بخواهيم از پايين به بالا باشد بايد از column-reverse استفاده کنيم.

6. wrap

بطور پيشفرض آيتم هاي داخل container تمايل دارند در يک سطر باشند، حتي اگر container فضاي کافي نداشته باشد از آن بيرون زده مي شوند. ولي اگر بخواهيم مي توانيم آنها را در چند سطر قرار دهيم که با استفاده از خاصيت flex-wrap از نوع wrap امکان پذير است.

.container{
   flex-wrap: nowrap | wrap | wrap-reverse;
}

حالت wrap-reverse آيتم ها را از پايين به بالا مي چيند.

7. justify-content

به کمک اين خاصيت مي توانيم آيتم ها را بطور افقي align کنيم که در ابتدا، انتها و يا وسط container نمايش داده شود و يا حتي فضاي خالي بين آنها را مديريت کنيم که اين فضاي خالي بين آيتم ها قرار بگيرد يا اطراف آنها.

.container{
   justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ;
}

8. align-item

اگر ارتفاع عمودي container بيشتر از آيتم ها باشد، مي توانيم آيتم ها را در راستاي عمودي align کنيم که در قسمت بالا، پايين و يا وسط قرار گيرند.

.container{
   align-items: stretch | flex-start | flex-end | center | baseline ;
}

baseline بر اساس محتواي آيتم ها آن ها را align مي کند.

9. align-content

هنگامي که آيتم هاي ما در يک سطر نباشند، يعني wrap شده باشند، مي توانيم چيدمان آيتم ها را بصورت عمودي مديريت کنيم. اين کار را با خاصيت align-content انجام مي دهيم.

.container{
   align-content: flex-start | flex-end | center | space-between | space-around ;
}

10. order

براي جابجايي آيتم ها از اين خاصيت استفاده مي کنيم که بطور پيشفرض صفر مي باشد.

.item{
   order: ; /* default is 0 */
}

11. flex-grow

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

.item{
   flex-grow: ; /* default 0 */
}

مثال عملکرد اين خاصيت را مي توانيد در فيلم مشاهده کنيد.

12. flex-shrink

اين خاصيت دقيقا برعکس خاصيت flex-grow کار مي کند. Shrink به معناي جمع شدن مي باشد.

.item{
   flex-shrink: ; /* default 1 */
}

مثال عملکرد اين خاصيت را مي توانيد در فيلم مشاهده کنيد.

13. align-self

براي اينکه هر آيتم را بطور جداگانه align کنيم از اين خاصيت استفاده مي کنيم.

.item{
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

14. flex

اين خاصيت ترکيبي از سه خاصيت flex-grow، flex-shrink و flex-basis است. (flex-basis ميزان عرض يا width يک المان را تعيين مي کند)

.item{
   flex: none | [ <'flex-grow'> <'flex-shrink'>?]
}

مثال عملکرد اين خاصيت را مي توانيد در فيلم مشاهده کنيد.