آموزش flex-wrap آموزش justify-content
در جلسه گدشته آموزش flexbox مقدماتی جلسه ۱ به صورت کامل آموزش دادیم اگه جلسه گذشته را ندید حتما اول ببنید.
اگه میخواهید به صورت کامل flexbox یاد بگیرید و یک متخصص flexbox بشید پیشنهاد می کنم حتما آموزش طراحی قالب دیجی کالا با flexbox حتما مشاهده فرمایید.
Flex-wrap یکی از ویژگیهای مدل Flexbox در CSS است که به شما این امکان را میدهد تا المانها را به صورت افقی یا عمودی در کنار هم قرار دهید و در صورت نیاز به خط بعدی منتقل کنید. در اینجا یک آموزش ساده برای استفاده از این ویژگی ارائه میشود:
ابتدا، شما باید المانهایی که میخواهید در فلکسباکس قرار بگیرند را انتخاب کنید. برای مثال، در مثال زیر، ما چند المان div با کلاس box ایجاد کردهایم:
|
1 2 3 4 5 6 7 |
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> </div> |
کد های html بالا را داخل یک سند html قرار بدید .
حالا شما باید فلکسباکس را برای المان container اعمال کنید. برای این کار، از خاصیت display با مقدار flex استفاده میکنیم:
|
1 2 3 |
.container { display: flex; } |
همانطور که میبینید، حالت پیشفرض flex-wrap نوشتهایم که به معنای این است که المانها به اندازهای در عرض کاهش مییابند که همگی در یک خط قرار بگیرند. برای نمایش المانها به صورت چند خط، مقدار wrap را به flex-wrap اضافه میکنیم:
|
1 2 3 4 |
.container { display: flex; flex-wrap: wrap; } |
همانطور که میبینید، حال المانها به صورت افقی در کنار هم قرار گرفتهاند و در صورت نیاز به خط بعدی منتقل میشوند. در این مثال، فضای کافی برای نمایش المانها در یک خط وجود نداشته و بنابراین برخی از المانها به خط بعدی منتقل شدهاند.
آموزش justify-content
Justify-content یکی از ویژگیهای مدل Flexbox در CSS است که به شما این امکان را میدهد تا المانها را در محور اصلی (main axis) فلکسباکس قرار دهید و فاصله بین آنها را کنترل کنید. در اینجا یک آموزش ساده برای استفاده از این ویژگی ارائه میشود:
ابتدا، شما باید المانهایی که میخواهید در فلکسباکس قرار بگیرند را انتخاب کنید. برای مثال، در مثال زیر، ما چند المان div با کلاس box ایجاد کردهایم:
|
1 2 3 4 5 |
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div> |
حالا شما باید فلکسباکس را برای المان container اعمال کنید. برای این کار، از خاصیت display با مقدار flex استفاده میکنیم:
|
1 2 3 |
.container { display: flex; } |
حالا میتوانید با استفاده از justify-content المانها را در محور اصلی قرار دهید. مقادیر مختلفی برای این ویژگی وجود دارد که هر کدام فاصلهبندی متفاوتی بین المانها را ایجاد میکنند. برخی از این مقادیر عبارتند از:
- flex-start: المانها را در ابتدای محور اصلی قرار میدهد (که به طور پیشفرض است).
- flex-end: المانها را در انتهای محور اصلی قرار میدهد.
- center: المانها را در وسط محور اصلی قرار میدهد.
- space-between: فضای مساوی بین المانها ایجاد میکند و المانها در ابتدا و انتهای محور اصلی قرار میگیرند.
- space-around: فضای مساوی بین المانها و حتی در ابتدا و انتهای محور اصلی ایجاد میشود.
جمع بندی آموزش flex-wrap آموزش justify-content
Flex-wrap و justify-content دو ویژگی مهم در مدل Flexbox در CSS هستند که به شما امکان میدهند المانهایی که در یک فلکسباکس قرار دارند، را در محور اصلی (main axis) قرار داده و فاصله بین آنها را کنترل کنید.
ویژگی flex-wrap به شما این امکان را میدهد تا المانهای فلکسباکس را به دو صفحه یا بیشتر تقسیم کنید، این بدان معناست که المانها در چندین ردیف قرار میگیرند. مقادیر مختلفی برای این ویژگی وجود دارد که به شما امکان میدهد نحوه قرارگیری المانها در صفحه را تعیین کنید.
با استفاده از ویژگی justify-content، شما میتوانید المانهای فلکسباکس را در محور اصلی قرار دهید و فاصله بین آنها را کنترل کنید. مقادیر مختلفی برای این ویژگی وجود دارد که هر کدام باعث ایجاد فاصلهبندی متفاوتی بین المانها میشود. با استفاده از این ویژگی، میتوانید المانها را در ابتدا، انتها یا وسط محور اصلی قرار داده و فاصله بین آنها را تنظیم کنید.
در کل، این دو ویژگی از اهمیت بسیاری برخوردارند و به شما این امکان را میدهند تا بتوانید چیدمان المانها را در صفحه به بهترین شکل ممکن ایجاد کنید.
هیچ دیدگاهی برای این محصول نوشته نشده است.