استفاده از Flexbox یکی از بهترین روش‌ها برای ایجاد طرح‌بندی‌های انعطاف‌پذیر و مدرن است. این روش به شما اجازه می‌دهد دیوهای کنار هم داشته باشید که به طور خودکار ارتفاعشان با محتوای داخلشان تنظیم می‌شود. در اینجا، ما به طور مختصر به چگونگی استفاده از Flexbox برای ایجاد دیوهای کنار هم با ارتفاع متغیر می‌پردازیم.
ابتدا، تمام دیوها را در یک کانتینر که خاصیت نمایش flex دارد قرار می‌دهیم. این خاصیت همه عناصر فرزند را به صورت خودکار کنار هم قرار می‌دهد. حالا می‌توانیم با استفاده از ویژگی‌های دیگری مثل flex-grow، مشخص کنیم چگونه فضا بین عناصر تقسیم شود.
یک خاصیت مهم دیگر در Flexbox، align-items است که می‌تواند برای تنظیم تراز عمودی دیوها استفاده شود. برای مثال، می‌توانیم تعریف کنیم که دیوها در یک سطح بالاترین یا پایین‌ترین نقطه قرار بگیرند.
همچنین می‌توانیم با استفاده از ویژگی justify-content چیدمان افقی دیوها را مشخص کنیم. به طور کلی، این ویژگی‌ها به ما قدرت زیادی برای کنترل چیدمان عناصر در صفحه می‌دهند.
در زیر یک مثال کاری از کاربرد Flexbox برای ایجاد دیوهای کنار هم ارائه شده است که به طور خودکار ارتفاعشان تنظیم می‌شود.
<div class="flex-container">
<div class="flex-item">Content 1</div>
<div class="flex-item">Content 2</div>
<div class="flex-item">Content 3</div>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.flex-item {
background-color: #f0f0f0;
margin: 5px;
padding: 20px;
flex-grow: 1;
}
</style>
ابتدا، ما یک کانتینر به نام flex-container ایجاد کردیم که خاصیت display: flex دارد، این باعث می‌شود همه عناصر فرزند به صورت کنار هم نشان داده شوند.
سپس سه دیو با کلاس flex-item تعریف شده که هر کدام دارای محتوای خود هستند. این دیوها در کانتینر Flexbox قرار دارند.justify-content: space-between باعث می‌شود که فضای بین دیوها به طور مساوی تقسیم شود، اما در عین حال اولین و آخرین دیو به لبه‌های کانتینر نزدیک‌تر می‌شوند.align-items: stretch باعث می‌شود ارتفاع همه دیوها با بزرگ‌ترین دیوی که داخل کانتینر است هماهنگ شود، به این ترتیب همه آنها دارای ارتفاع متغیر اما هماهنگ خواهند بود.flex-grow: 1 به هر دیو این امکان را می‌دهد که در صورت نیاز، فضای اضافه داخل کانتینر را بگیرد و بزرگ‌تر شود.