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

در طراحی صفحات وب یکی از مهم ترین کارها لایه بندی صفحه وب یا به عبارتی چیدمان عناصر صفحه در کنار هم می باشد. flexbox یکی از بهترین تکنیک های لایه بندی صفحات وب می باشد.

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

در این ویدئوی آموزشی با مفاهیم  css به همراه مثال های عملی آشنا می شوید . متن آموزش نیز در همین صفحه آمده است اما جهت آشنایی با مثال ها توصیه می کنیم فیلم را مشاهده نمایید .

 

پیش نیازها

برای استفاده از flexbox لازم است با مفاهیم مقدماتی html و css آشنا باشید که می توانید از دوره آموزش html,css استفاده کنید.

قابل دانلود

آموزش سریع 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'>?]
}

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

 

هزینه ها
انتخاب آیتم های ستاره دار اجباری است
عنوان هزینه تعداد
هزینه * رایگان -
محتوا
  • - دانلود ها

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

    workshop

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

توسعه وب / HTML-CSS