Web Devs

#Flexbox

🔰Flexbox Grid System

🔸بسیاری از توسعه دهندگان با سیستم های گریدی css مانند بوت استرپ اشنا هستند. که درگذشته با استفاده از float و مقادیر درصدی برای width المنت ها، پیاده سازی شده اند.

🔹اما امروزه مرورگر ها پیشترفته تر شده اند و به خوبی از flexbox پشتیبانی میکنند.
از همین رو استفاده از یک گرید سیستم بر پایه flexbox مزایای شاخص داری را، ارائه میدهد.


▫️simpler syntax
▫️ equal height columns
▫️ reordering sibling content

🔹بوت استرپ 4 از یک flex grid سیستم برخوردار است.
اکنون به برسی یک سری general structure در سیستم گرید و نحوه پیاده سازی انها میپردازیم.

▪️Rows
ساختار کلی مانند دیگر سیستم های قدیمی گرید است. با ساختاری مانند یک parent row و column های child، در نتیجه flex container تان به این شکل خواهد بود :
.row {
display: flex;
flex-wrap: wrap;
margin-left: -1rem;
margin-right: -1rem;
}

🔻 پراپرتی flex-wrap مشخص میکند که در حالت فلکس باکس ،فلکس ایتم ها فقط در یک خط کنار هم بیایند و یا به خط بعدی منتقل شوند.

▪️Columns
برای تعریف یک base class برای Columns این گونه کد مینویسیم :
.col {
flex-grow: 1;
flex-basis: 100%;
padding-left: 1rem;
padding-right: 1rem;
}

🔻با پراپرتی flex-grow می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container صفحه آرایی شدند افزایش دهیم.

▪️Flex-direction
جهت چینش عناصر داخلی یا فرزند هارا در المنت پدر مشخص میکند.

🔻با پرارپتی flex-basisمی توان به هر عنصر یک مقدار اختصاص داد و این مقدار با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد

▪️justify-content
با این پراپرتی , فلکس ایتم ها یا المنت های فرزند در جهت افقی چینش میشوند.

▪️align-items
با این پراپرتی , فلکس ایتم ها یا المنت های فرزند در جهت عمودی چینش میشوند.

▪️align-content
این پراپرتی رفتار flex-wrap را تغییر میدهد و مشابه پراپرتی align-items میباشد با این تفاوت که به جای align کردن فلکس ایتم ها، فلکش لاین ها را چینش میکند. در این حالت باید فلکس ایتم ها بیشتر از چند line باشند تا مقادیر این پراپرتی بر روی انها تاثیر بگذارد.


@fullStackDevs

www.tgoop.com/fullStackDevs/647

663 viewsedited  May 20, 2021 at 07:44

#Flexbox

🔰Flexbox Grid System

🔸بسیاری از توسعه دهندگان با سیستم های گریدی css مانند بوت استرپ اشنا هستند. که درگذشته با استفاده از float و مقادیر درصدی برای width المنت ها، پیاده سازی شده اند.

🔹اما امروزه مرورگر ها پیشترفته تر شده اند و به خوبی از flexbox پشتیبانی میکنند.
از همین رو استفاده از یک گرید سیستم بر پایه flexbox مزایای شاخص داری را، ارائه میدهد.


▫️simpler syntax
▫️ equal height columns
▫️ reordering sibling content

🔹بوت استرپ 4 از یک flex grid سیستم برخوردار است.
اکنون به برسی یک سری general structure در سیستم گرید و نحوه پیاده سازی انها میپردازیم.

▪️Rows
ساختار کلی مانند دیگر سیستم های قدیمی گرید است. با ساختاری مانند یک parent row و column های child، در نتیجه flex container تان به این شکل خواهد بود :
.row {
display: flex;
flex-wrap: wrap;
margin-left: -1rem;
margin-right: -1rem;
}

🔻 پراپرتی flex-wrap مشخص میکند که در حالت فلکس باکس ،فلکس ایتم ها فقط در یک خط کنار هم بیایند و یا به خط بعدی منتقل شوند.

▪️Columns
برای تعریف یک base class برای Columns این گونه کد مینویسیم :
.col {
flex-grow: 1;
flex-basis: 100%;
padding-left: 1rem;
padding-right: 1rem;
}

🔻با پراپرتی flex-grow می توانیم عرض آیتم یا آیتم هایی که با حالت Flexbox درون یک تگ container صفحه آرایی شدند افزایش دهیم.

▪️Flex-direction
جهت چینش عناصر داخلی یا فرزند هارا در المنت پدر مشخص میکند.

🔻با پرارپتی flex-basisمی توان به هر عنصر یک مقدار اختصاص داد و این مقدار با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد

▪️justify-content
با این پراپرتی , فلکس ایتم ها یا المنت های فرزند در جهت افقی چینش میشوند.

▪️align-items
با این پراپرتی , فلکس ایتم ها یا المنت های فرزند در جهت عمودی چینش میشوند.

▪️align-content
این پراپرتی رفتار flex-wrap را تغییر میدهد و مشابه پراپرتی align-items میباشد با این تفاوت که به جای align کردن فلکس ایتم ها، فلکش لاین ها را چینش میکند. در این حالت باید فلکس ایتم ها بیشتر از چند line باشند تا مقادیر این پراپرتی بر روی انها تاثیر بگذارد.


@fullStackDevs

BY Web Devs