آموزش پروژه محور css-flex

Flexbox یک مدل چیدمان در CSS است که به شما کمک می‌کند تا آیتم‌ها را در یک خط یا ستون به صورت انعطاف‌پذیر مرتب کنید. با Flexbox، دیگر نیازی به استفاده از روش‌های پیچیده برای چیدمان آیتم‌ها مثل float، inline-block وtable نیست.

چند مفهوم اصلی Flexbox:

Container (ظرف): عنصری که Flexbox روی آن اعمال می‌شود. این عنصر شامل آیتم‌های فرزند یا همان items است.
- برای تعریف یک container به شکل Flexbox از خاصیت display: flex; استفاده می‌کنیم.
Items آیتم‌ها: عناصری که در داخل container قرار می‌گیرند و به کمک Flexbox مرتب می‌شوند.
خاصیت‌های مهم:
- flex-direction: جهت چیدمان آیتم‌ها را مشخص می‌کند (افقی یا عمودی).
  - row (پیش‌فرض): آیتم‌ها به صورت افقی چیده می‌شوند.
  - column: آیتم‌ها به صورت عمودی چیده می‌شوند.
- justify-content: چیدمان آیتم‌ها در محور اصلی (افقی یا عمودی) را تنظیم می‌کند.
  - flex-start: آیتم‌ها از ابتدا شروع می‌شوند.
  - center: آیتم‌ها در مرکز قرار می‌گیرند.
  - space-between: فاصله مساوی بین آیتم‌ها ایجاد می‌کند.
- align-items: تراز عمودی آیتم‌ها در محور متقاطع را تنظیم می‌کند.
  - stretch (پیش‌فرض): آیتم‌ها به طور کامل در محور متقاطع کشیده می‌شوند.
  - center: آیتم‌ها در محور متقاطع به صورت وسط‌چین قرار می‌گیرند.
flex-grow: تعیین می‌کند که هر آیتم چه مقدار فضای اضافی بگیرد.
- مثلاً اگر یک آیتم flex-grow: 1; باشد و دیگری flex-grow: 2;، آیتم دوم دو برابر آیتم اول فضا می‌گیرد.
flex-wrap: تعیین می‌کند که اگر فضا کم باشد، آیتم‌ها در چند خط قرار بگیرند یا در یک خط بمانند.

این یک مثال ساده از Flexbox است:

در این مثال، آیتم‌ها به صورت افقی در مرکز container و محور عمودی تراز شده‌اند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            height: 100vh;
            background-color: blue;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            >*{
                background-color: lightblue;
                padding: 20px;
                margin: 10px;
                color: black;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Lorem ipsum dolor sit.</h2>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <h4>Lorem, ipsum.</h4>
        <h4>Lorem ipsum dolor sit amet consectetur.</h4>
        <h2>Lorem, ipsum dolor.</h2>
    </div>
</body>
</html>

ادامه مطلب بسیار مفصل و با مثال های متعدد توسط مهندس شیوا رحیمی تبار نوشته شده است که حتما پیشنهاد میکنیم از طریف این لینک PDF آن را تهیه کرده و مطالعه کنید.

آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

در ضمن میتوانید سری ویدیو های زیر را به ترتیب مشاهده کنید.

این ویدیو ها برای کلاس سری دهم آموزش طراحی سایت همراه تضمین استخدام میباشد که در مبحث flex ، سایت BMW بصورت full flex کدنویسی شده است.

پیشنهاد میکنیم برای درک کامل و پروژه محور این مبحث، حتما این مقاله آموزش پروژه محورflex که بصورت رایگان میباشد را از دست ندهید و برای دوستانتان هم ارسال کنید.

flex بهترین راه و روش برای دیزاین کردن سمت فرانت اند میباشد و حتی در ری اکت نیتیو هم کاربرد دارد.

تمرین و کدنویسی را در هنگام تماشای ویدیو فراموش نکنید.

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.