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'>?]
}
مثال عملکرد اين خاصيت را مي توانيد در فيلم مشاهده کنيد.