جعبه های منعطف

چیدمان با flexbox :

flexbox چیست؟

منظور از جعبه های منعطف قسمت هایی از یک بخش کلی می باشد که در آن بخش با تغییر پارامترهایی جعبه ها به صورت منظم و منعطف در کنار یکدیگر قرار می گیرند و با تغییر در سایز پنجره نمایش بهم ریخته نمی شوند.

در اینجا یک بخش کلی یا جعبه مادر با display:flex وجود دارد و تعدادی جعبه منعطف فرزند که می توانند به صورت افقی یا عمودی (با صفت flex-direction) در کنار یکدیگر قرار گیرند.


flexbox

style :
.flex-container {display: flex;height: 200px;align-items: baseline;background-color: DodgerBlue;}
.flex-container>div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}
html :
<div class=”flex-container”>
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div>
<div><small>4</small></div></div>


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

مـــهم برای استفاده راحت از flexbox شما باید از آن مکرر استفاده نموده و برای اطلاعات تکمیلی به سایت w3s مراجعه نمایید.

 

صفحه بعدیصفحه قبلی

 

تاریخ آخرین بروز رسانی:2017/12/30

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *