خانه » flexbox در css

flexbox در css

اگر با مفهوم flexbox آشنا نیستید و یا نمی دانید در چه مواقعی از display flex در css استفاده میکنیم حتما مقاله آموزش جامع Flexbox در CSS را تا انتها مطالعه کنید. پیشنهاد می کنیم قبل از شروع مقاله برای درک بهتر از ویژگی display، حتما مقاله جامع display در css را مطالعه فرمایید. پیشنهاد […]

تعداد نظرات: 22
دسته بندی ها: CSS / HTML
زمان مطالعه: 49 دقیقه

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

اگر با مفهوم flexbox آشنا نیستید و یا نمی دانید در چه مواقعی از display flex در css استفاده میکنیم حتما مقاله آموزش جامع Flexbox در CSS را تا انتها مطالعه کنید. پیشنهاد می کنیم قبل از شروع مقاله برای درک بهتر از ویژگی display، حتما مقاله جامع display در css را مطالعه فرمایید.

پیشنهاد ویژه: اگر به یادگیری html و css علاقمند هستید حتما از فیلم رایگان آموزش html css پروژه محور رایگان استفاده کنید.

آنچه در این پست می خوانید :

flexbox چیست ؟
کاربرد flexbox چیست
شیوه کار با display flex در css
دستورات مربوط به فلکس باکس
flex-direction در css
justify-content در css
ویژگی align-items در css
flex-wrap در css
ویژگی flex-flow در css
ویژگی align-content در CSS3
ترتیب نمایش عناصر آیتم های flex به کمک صفت order در css
ویژگی align-self در فلکس باس
ویژگی flex-grow در css
خاصیت flex-shrink
خاصیت flex-basis
تفاوت Grid با Flexbox در CSS چیست
آموزش جامع Flexbox در CSS
تمرین فلکس باکس

flexbox چیست ؟

FlexBox عنوانی اختصاری و برگرفته از Flexible Box یا جعبه‌ی منعطف است. به این معنی که آیتم‌ ها ( تگ های html ) با هر اندازه‌ ای می‌ توانند درون آن، جا بگیرند.

ماژول flexbox یا همان ویژگی flex یکی از موار بسیار کاربردی است که بعد از مشکلات فراوان در چینش المان ها در ورژن های قبلی CSS به ورژن CSS3 اضافه شد. همانطور که در مقالات قبلی CSS توضیح داده شده قبل از روی کار آمادن flexbox از ویژگی float برای چینش المان ها در کنار هم استفاده می شد که با افزایش تعداد المان ها مخصوصا تگ های تودرتو کار با ویژگی float نیز سخت می شد.

در واقع FlexBox در طراحی‌ صفحات واکنش‌گرا یا همان Responsive کارایی زیادی دارد، چرا که با چیدن آیتم‌ ها (Flex Item) درون یک سطر یا ستون در قالب نگه‌ دارنده (Flex Container)، به طور خودکار عناصر طراحی را با اندازه‌ی صفحه منطبق کرده و مشکلاتی مانند Float یا Whitespace را برطرف می‌کند.

پیشنهاد می کنیم برای یادگیری عمیق تر حتما مقال css چیست را مطاعه کنید.

کاربرد flexbox چیست

با توجه به توضیحات بالا از کاربر های FlexBox می‌توان به طراحی راحت چند سطری و یا چند ستونی صفحات وب اشاره کرد که در ادامه کامل به آن خواهیم پرداخت.

مزایای استفاده از FlexBox چیست؟

FlexBox نسبت به ویژگی های قبل از خود مثل float که قبلا به طور گسترده توسط طراحان وب استفاده می‌ شد، اجازه می‌دهد کدهای استانداردتری نوشته‌ شود که در مرورگرهای مختلف به خوبی کار کنند. این ماژول به جای تمرکز روی راه‌ حل‌ های پیچیده یا استفاده از ترفند هایی مثل CSS Hacks روی شفافیت طراحی تمرکز دارد.

یکی از مشکلات رایج ویژگی float در css این است که با اضافه کردن المان و محتوای جدید به یک بخش از سطر یا ستون، ممکن است لایه بندی ما به هم ریخته و کل آن بخش خراب شود، کا با استفاده از display flex در css این مشکل حل خواهد شد.

از سایر مزایای استفاده از flexbox در css می توان به موارد زیر اشاره کرد:

به کمک ویژگی flex در css قراردادن المان‌ ها کنار یکدیگر در یک ردیف بدون نیاز به تعیین اندازه‌ دقیق پهنا و هم‌ تراز سازی نسبت به المان نگهدارنده امکان پذیر است.
با استفاده از display flex در css تغییر ترتیب المان‌ها به آسانی امکان‌ پذیر است.
اگر برای عنصر هایی که در یک خط قرار گرفتن جای کافی نباشد به راحتی به کمک مقدار flex-wrap در css عنصر آخر به صورت خودکار در ردیف بعد قرار می‌ گیرد.
تعیین اندازه‌ی یک المان نسبت به اندازه‌ی المان نگهدارنده به‌صورت واکنش‌ گرا ممکن است.
به کمک مقادیر مرتبط با ویژگی Flex پشتیبانی از چیدمان معکوس نیز امکان پذیر است.

اگر فرصت شرکت در کلاس های حضوری را دارید، امکان شرکت در کلاس html و css آموزشگاه آریا تهران را از دست ندهید. یادگیری و آموزش طراحی سایت به همراه دریافت مدرک بین المللی.

شیوه کار با display flex در css

در مقالات قبل در مورد display block و display inline صحبت کردیم. display Felx توانایی های پیچیده تر و بیشتری نسبت به این دو ویژگی داشته و می‌تواند عناصر موجود در صفحه وب را با بدون هیچ دردرسری در کنار هم قرار دهد. طراحی ریسپانسیو با flexbox خیلی ساده تر خواهد شد.

برای استفاده از flexbox، باید به عنصر پدری که سایر عناصر را در خود جای داده مثلا تگ div، دستور display:flex اختصاص بدهیم. با اختصاص دادن این دستور CSS دست ما برای استفاده از مقادیر مرتبط با ویژگی display flex باز شده و امکان چدیمان صفحه آرایی حرفه ای صفحات وب در اختیار ما قرار می گیرد.

برای درک بهتر ماجرا به مثال زیر توجه کنید.

نکته: در مثال های زیر ما برای انتقال سریع تر و همچنین در درسترس بودن کد اچ تی ام ال، css های مورد نیاز را در تگ style موجود در تگ head در html نوشته ایم

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

همانطور که می بینید، در کد های فوق چهار تگ div داریم که به علت بلاکی بودن تگ ها، هر چهار تگ زیر هم قرار گرفته اند. برای تغییر آرایش و صفحه آرایی این عناصر چه کنیم؟

برای این کار کافی است به کد های css خود یک Display:felx اضافه کنید. اما کجا؟ سوال مهم اینجاست. مقداری display flex را باید برای عنصر والد یا پدر در نظر گرفت. البته به این عنصر عنصر نگهدارنده یا container نیز گفته می شود.

در مثال بالا تگ div با کلاس container همان تگ والدی است که چهار تگ دیگر را در دل خود جای داده است. بنابراین اگر در کد های css فوق که در تگ style نوشته شده کد زیر را اضافه کنید حالت زیر اتفاق می افتد.

اگر با تگ های HTML آشنا نیستید، آموزش خود را با مقاله html چیست شروع کنید.

  .container{
            display: flex;
        }

همانطور که می بینید، عناصر داخلی، برخلاف block بودنشان، inline رفتار کرده و در راستای یک خط یا row قرار گرفته اند. بنابراین اولین تاثیر ویژگی flex در css، این است که عناصر داخلی را، هر چه که باشند در راستای یک خط مرتب می‌کند.

حالا چطور عناصر داخلی را سفارشی تر مرتب کنیم؟ مثلا چطور ترتیب بالا که از آبی به زرد است را تغییر دهیم؟ چطور عناصر موجود در کانتینر را وسط چین کنیم؟ چطور اونها رو از هم فاصله بدیم؟ و…

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

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

دستورات مربوط به فلکس باکس

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

flex-direction
justify-content
align-content
align-items
flex-wrap
flex-grow
flex-shrink
flex-basis
flex-flow

flex-direction در css

گفتیم که با فعال شدن دستور display: flex یا همان خاصیت Flex، عناصر فرزند در راستای یه خط مرتب می شوند. همچنین گفتیم که با فعال شدن دستور مذکور یک سری ویژگی دیگر نیز امکان فعال شدن دارند. یکی از ان ویژگی ها Flex direction است.

توسط خاصیت Flex direction در css می‌تونیم سطر رو به ستون تبدیل کنیم.

ویژگی Flex direction در css چهار مقدار زیر را می پذیر که هرکدام کاری خاص را انجام می دهند:

column: این مقدار عناصر را در راستای یک ستون قرار میدهد.
row: این مقدار عناصر را در راستای یک سطر قرار می دهد.
row-reverse: این مقدار عناصر را در راستای یک سطر، اما از انتها قرار می دهد.
column-reverse: این مقدار عناصر را در راستای یک ستون، اما از انتها قرار می دهد.

مثال از flex-direction در css

در کد CSS آموزش فلکس باکس زیر ما مقدار column و column-reverse را به عنوان مثال قرار داده ایم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: column;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

در کد بالا با استفاده از دستور display: flex و در ادامه دستور flex-direction: column به عناصر فرزند فرمان داده شده که با همان ترتیبی که در کد HTML آمده در یک ستون قرار بگیرند. یعنی از دیو رنگ با آبی تا دیو با رنگ زرد.

در کد CSS آموزش فلکس باکس زیر به کمک دستور flex-direction: column-reverse به عناصر فرزند دستور خواهیم داد در عین اینکه باید در یک ستون قرار بگیرند، اما باید برخلاف ترتیب کد های HTML نمایش داده شوند. یعنی از تگ div با رنگ زرد به div با رنگ آبی.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: column-reverse;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

مقادیر row و row-reverse هم به شکل همین مثال عمل می کنند، اما در راستای سطر.

اگر هنوز html , css را به طور کامل بلد نیستید و میخواهید یک وبمستر حرفه ای بشید و به راحتی تمام امور یک سایت را مدیریت کنید میتوانید در دوره آموزش وبمستر آریا تهران شرکت کنید. در این دوره html , css , javascript و سئو و نحوه کار با ابزار های تخصصی سئو مانند سرچ کنسول و گوگل آنالیتیکس به شما آموزش داده میشود و تمام این آموزش ها متناسب با نیاز بازار کار میباشد. شما در انتهای این دره میتوانید با مهارت های کسب شده خود به راحتی جذب بازار کار شده و به عنوان یک وبمستر کسب درآمد چندین برابری داشته باشید. استخدام شدن شما با مهارت های کسب شده این دوره جامع قطعی میباشد.

justify-content در css

زمانی که flex-direction: row باشد، خاصیت justify-content در CSS برای تراز کردن عناصر فرزند در راستای افقی، استفاده می شود. و اگر flex-direction: cloumn باشد برعکس و کار تراز کردن عناصر فرزند در راستای عمودی را بر عهده خواهد داشت.

در حال فعلی در مثال های زیر ما مقدار ویژگی flex-direction را row در نظر گرفته و ترازبندی افقی را انجام می دهیم.

ویژگی justify-content در CSS پنج مقدار زیر را می پذیر که هرکدام کاری خاص را انجام می دهند:

center: این مقدار عناصر فرزند را در فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده وسط چین می کند.
flex-start: این مقدار عناصر فرزند را به ابتدای فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده منتقل می کند. ابتدای این فضا به direction یعنی rtl یا ltr بودن صفحه مربوط است.
flex-end: این مقدار عناصر فرزند را به انتهای فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده منتقل می کند. انتهای این فضا به direction یعنی rtl یا ltr بودن صفحه مربوط است.
space-between: این مقدار متناسب با عرض عنصر پدر، فاصله ای مساوی بین عناصر را مشخص می‌ کند. البته این فاصله برای ابتدا و انتهای عنصر پدر در نظر گرفته نمی شود.
space-around: این مقدار مشابه مقدار space-between است، با این تفاوت که در ابتدا و انتها فضا عنصر والد نیز یک فضای مساوی از دو طرف ایجاد می‌کنه.
space-evenly: این مقدار مشابه مقدار space-between و space-around است، با این تفاوت فضای اضافی متعلق به عنصر پدر یا همان عنصر نگهدارنده را از همه طرف به صورت مساوی تقسیم می کند.

justify-content: center

در کد پایین با استفاده از دستور display: flex و در ادامه دستور justify-content: center به عناصر فرزند فرمان داده شده که با همان ترتیبی که در کد HTML آمده در دقیقا بصورت وسط چین در فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده قرار بگیرند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

justify-content: flex-start

در کد پایین با استفاده از دستور display: flex و در ادامه دستور justify-content: flex-start به عناصر فرزند فرمان داده شده که با همان ترتیبی که در کد HTML آمده در ابتدای فضای متعلق به عنصر پدر قرار بگیرند.

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

برای کسب اطلاعات بیشتر در مورد جهت نوشتاری صفحه حتما مقاله ویژگی direction را مطالعه کنید تا در مورد مقادیر RTL (راست به چپ) و LTR (چپ به راست) اطلاعات بیشتری کسب کنید.

justify-content: flex-end

این مقدار کاملا شبیه به مقدار flex-start است، منتهی به صورت معکوس. به عبارتی تولید محتوا در یک صفحه وب از هر طرفی که باشه، توسط این مقدار، می‌توانیم محتوا را برخلاف آن جهت قرار بدهیم.

در کد CSS آموزش فلکس باکس زیر با استفاده از دستور display: flex و در ادامه دستور justify-content: flex-end به عناصر فرزند فرمان داده شده که با همان ترتیبی که در کد HTML آمده در خلاف جهت تولید محتوایی صفحه قرار بگیرند.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

justify-content: space-between

مقداری space-between متناسب با عرض عنصر پدر، فضای بین عناصر را تقسیم می‌ کند. در واقع به کمک این مقدار بدون دست زدن به عرض عناصر، به شکلی که عناصر فرزند تمام عرض عنصر پدر را در بر بگیرن مرتب می شوند. نتیجه این مقدار را در شکل زیر می بینید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

همانطور که می بینید به کمک مقدار space-between بجز در قسمت ابتدا و انتهای فضای عنصر پدر باقی فضا (فضای بین عناصر) به قسمت های مساوی تقسیم شده تا عناصر فرزند در این فضا به یک شکل پراکنده شوند.

justify-content: space-around

همانطور که در تصویر پایین می بینید، مقدار space-around مثل space-between عمل می کند. با این تفاوت که برای توزیع عناصر در فضای متعلق به عنصر والد، علاوه بر فضای بین عناصر فرزند، فضایی مساوی را در ابتدا و انتهای عنصر والد هم در نظر می گیرد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

justify-content: space-evenly

مقدار space-evenly در کد css فلکس باکس مثل مقادیر space-around و space-between عمل می کند. با این تفاوت که تمام فضا را بطور کاملا مساوی تقسیم می کند. که در شکل زیر می بینید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

برای درک بهتر تفاوت بین مقادیر space-around و space-between و space-evenly فقط به سه تصویر بالا و شیوه قرار گیری عناصر و فضای بین آنها توجه کنید.

ویژگی align-items در css

زمانی که flex-direction: row باشد، ویژگی align-items در css کاملا شبیه به خاصیت justify-content اما بجای اینکه در راستای افقی فعال باشد در راستای محور عمودی عناصر را تحت تاثیر قرار می دهد. اما اگر flex-direction: cloumn باشد برعکس و کار تراز کردن عناصر فرزند در راستای افقی را بر عهده خواهد داشت.

در حال فعلی در مثال های زیر ما مقدار ویژگی flex-direction را row در نظر گرفته و ترازبندی عمودی را انجام می دهیم.

توجه داشته باشید که این خاصیت تنها زمانی کار می کند که عنصر پدر مورد نظر، دارای ارتفاعی بیشتر از ارتفاع عناصر فرزندان خودش باشد. بنابراین در مثال های زیر ویژگی height را ۷۵۰px در نظر گرفتیم.

مقادیر مورد قبول ویژگی align-items در css عباتند از:

center: این مقدار عناصر فرزند را در فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده در تراز عمودی وسط چین می کند.
flex-start: این مقدار عناصر فرزند را به ابتدای فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده منتقل می کند. ابتدای این فضا منظور بالای ترازی عمودی عنصر پدر است.
flex-end: این مقدار عناصر فرزند را به انتهای فضای متعلق به عنصر پدر یا همان عنصر نگهدارنده منتقل می کند. انتهای این فضا منظور پایین ترازی عمودی عنصر پدر است.
space-between: این مقدار متناسب با عرض عنصر پدر، فاصله ای مساوی بین عناصر را مشخص می‌ کند. البته این فاصله برای ابتدا و انتهای عنصر پدر در نظر گرفته نمی شود.
space-around: این مقدار مشابه مقدار space-between است، با این تفاوت که در ابتدا و انتها فضا عنصر والد نیز یک فضای مساوی از دو طرف ایجاد می‌کنه.
stretch: به کمک این مقدار محتوا در راستای ارتفاع عنصر پدر و در راستای تراز عمودی گسترش پیدا می کند.
baseline: به کمک این مقدار عناصر فرزند، در راستای خط مبدا خودشان تراز می شوند.

align-items: center

این مقدار عناصر فرزند را در راستای ارتفاع عنصر پدر، وسط چین می‌کند. به شکل زیر

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 750px;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

align-items: flex-start

به کمک این مقدار عناصر فرزند در ابتدا یا همان بالای عنصر پدر قرار می گیرند. به شکل زیر دقت کنید.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            height: 750px;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

align-items: flex-end

به کمک این مقدار عناصر فرزند در انتها یا همان پایین عنصر پدر قرار می گیرند. به شکل زیر دقت کنید.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            height: 750px;
        }
        .container div{
            margin: 10px;
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

align-items: stretch

این مقدار، محتوا را در راستای ارتفاع عنصر پدر، گسترش می دهد. فقط برای استفاده از این مقدار به این نکته توجه داشته باشید که، این مقدار در صورتی تاثیرگذار است که به هیچکدوم از عناصر فرزند، ارتفاع خاصی اختصاص داده نشده باشه.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            align-items: stretch;
            height: 750px;
        }
        .container div{
            margin: 10px;
            width: 100px;
        }
        .div1{
            background-color: blue;
        }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;
        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

align-items: baseline

به کمک این مقدار، عناصر فرزند، در راستای خط مبدا خودشان تراز می شوند. خط مبدا یا همان baseline یعنی چه؟

این مفهوم تعریف خیلی دقیقی ندارد، اما در یک تعریف ساده، به خطی اطلاق می شود که “زیر محتوای عنصر کشیده می شود” بر اساس همین تعریف، کافی که محتوای هر عنصر رو یک مقدار تغییر بدهیم و ببینیم که این مقدار چگونه رفتار می کند.

به کد زیر دقت کنید. ما به بعضی تگ ها div فرند، ویژگی margin از بالا بیشتری اختصاص داده ایم. که به شکل زیر نمایش داده خواهد شد.

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            height: 750px;
        }
        .container div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
            margin: 40px 10px;
                }
        .div2{
            background-color: red;
            margin: 20px 10px;
        }
        .div3{
background-color: green;
margin: 40px 10px;

        }
        .div4{
            background-color: yellow;
            margin: 20px 10px;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
            align-items: baseline;
            height: 750px;
        }
        .container div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: blue;
            margin: 40px 10px;
                }
        .div2{
            background-color: red;
            margin: 20px 10px;
        }
        .div3{
background-color: green;
margin: 40px 10px;

        }
        .div4{
            background-color: yellow;
            margin: 20px 10px;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

همانطور که می بینید عناصر نسبت به پایین تر عناصر با هم همتراز شدند.

نکته: در مورد استفاده از justify-content و align-items به مقدار flex-direction توجه داشته باشید. اگه جهت flex را به صورت column قرار بدهید، کاربرد justify-content و align-items باهم عوض می‌ شود. یعنی خاصیت اول عناصر فرزند را به صورت عمودی، و خاصیت دوم آنها را به صورت افقی تراز می‌ کند.

flex-wrap در css

به کمک ویژگی flex-wrap در CSS می توان مشخص کرد که آیتم های فلکس در صورت نیاز شکسته شده و به سطر های جدید بروند یا نه مثلا همه ی آیتم ها در یک سطر نمایش داده شوند. به عبارتی خاصیت Flex wrap در CSS عناصر flexbox را بین سطر ها و ستون های مختلف تقسیم کرده و از فشرده شدن سطر و ستون ها جلوگیری می کند.

برای آشنایی کامل به این ویژگی ما در مثال قبل عرض عناصر فرزند را بالا می بریم. پس کد هر تگ div فرزند را به شکل زیر تغییر می‌دهیم:

.container div{
            width:500px;
   height:100px;
   margin:10px;
        }

همانطور که می بینید تمامی عناصر فرزند با اینکه دارای عرض ۵۰۰ پیکسلی بوده، اما هنوز در راستای یک خط هستند. چرا؟

چون عرض عناصر فقط تاجایی زیاد شده که عرض صفحه ما گنجایش آن را دارد.یعنی اگر عرض را از ۵۰۰ پیکسل به ۱۰۰۰ پیکسل هم برسانیم، باز همین نتیجه بالا را می‌گیریم و هیچ تغییری مشاهده نمی‌کنیم. خوب باید چه کرد؟

اینجاست که ما از flex-wrap استفاده می‌‌کنیم. دستوری که باعث می شود عناصر متناسب با عرض صفحه و عرض خودشان در سطرها و ستون های جدید قرار گرفته و از فشردگی عناصر جلوگیری شود.

ویژگی flex-wrap در سی اس اس ۳ مقدار زیر را قبول می‌کند:

no-wrap: مقدار پیش فرضی که عناصر را در یک خط یا ستون قرار می دهد.
wrap: مقداری که عناصر را به ترتیب بین خطوط و ستون ها جدید تقسیم می کند .
wrap-reverse: مقداری که عناصر را بر خلاف ترتیب اصلی موجود در کد html بین خطوط و ستون ها تقسیم می‌ کند.

flex-wrap: wrap

برای شروع کار می بایست کد flex-wrap: wrap را به کد های css عنصر والد یا همان نگهدارنده اضافه کنید.

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
        }
        .container div{
            width:500px;
   height:100px;
   margin:10px;
        }
        .div1{
            background-color: blue;
            order: -1;
                }
        .div2{
            background-color: red;
        }
        .div3{
background-color: green;

        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

flex-wrap: wrap-reverse

مقدار flex-wrap: wrap-reverse همان عملیات flex-wrap: wrap را انجام می دهد با این تفاوت که مکان اصلی عناصر را معکوس می کند. به شکل زیر

    .container{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap-reverse;
        }

برای درک بهتر تفاوت و تاثیر flex-wrap: wrap-reverse تصویر بالا را با تصویر قبل تر مقایسه کنید.

flex-wrap: nowrap

مقدار nowrap همان مقدار پیش فرض و بدون wrap است که همه عناصر در یک خط قرار می گیرند.

ویژگی flex-flow در css

دو ویژگی flex-direction و flex-wrap معمولا با هم استفاده می شوند، به همین دلیل ویژگی flex-flow برای کوتاه سازی کد نویسی و ترکیب این دو ویژگی ساخته شد. این ویژگی مقادیر هر دو ویژگی flex-direction و flex-wrap را می پذیر، فقط باید بین آنها با اسپس فاصله بگذارید. مثل کد زیر:

flex-flow: column wrap

در کد بالا ما به عناصر مورد نظر دستور می دهیم که در عین حالی که باید بصورت ستونی دسته بندی شوند می باید با تاثر wrap در صورت نیاز در ستوهای جدید قرار بگیرند.

ویژگی align-content در CSS3

ویژگی align-content ویژگی ای است که تحت تاثیر رفتار خاصیت flex-wrap قرار می گیرد و با استفاده از آن می توان موقعیت قرار گیری یا تراز خطوط یک فلکس را مشخص نمود.

این ویژگی، مخلوطی از دو ویژگی align-items و justify-content است البته با مقداری تفاوت. برای مثال ویژگی align-items تراز آیتم های فلکس را مشخص می کند ولی ویژگی align-content تراز خطوط یا لاین های فلکس را.

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

مقادیر مورد قبول ویژگی align-content به شرح زیر است:

center: لاین ها یا خطوط آیتم های فلکس را در وسط فلکس قرار می دهد.
flex-start: لاین ها یا خطوط آیتم های فلکس را در قسمت شروع فلکس قرار میدهد.
flex-end : لاین ها یا خطوط آیتم های فلکس را در قسمت پایانی فلکس قرار میدهد.
stretch: این مقدار، مقدار پیش فرض بوده و سعی می کند تمام فضای فلکس را بپوشاند.
space-around: یک فضای خالی به مقدار مساوی در اطراف خطوط ایجاد میکند.
space-between : یک فضای خالی به مقدار مساوی بین خطوط ایجاد میکند.

<!DOCTYPE html>
<html>
<head>
<style>

#main {
 width: 70px;
 height: 300px;
 border: 1px solid #c3c3c3;
 display: flex;
 flex-wrap: wrap;
 align-content: center;
}

#main div {
 width: 70px;
 height: 70px;
}

</style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>

<div id="main">
 <div style="background-color:red;"></div>
 <div style="background-color:blue;"></div>
 <div style="background-color:green;"></div>
</div>

<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

همانطور که در تصویر فوق می بینید مقدار center برای ویژگی align-content باعث وسط چین شدن خطوط محتوای داری wrap شده است.

شاید مقداری گیج شده باشید که حق دارید. اما در صورت کلی بدانید که align-content فضای بین خطوط را تعیین می کند، در حالی که align-items تعیین کننده مکان ایتم ها نسبت به کل فضای موجود است.

align-content: flex-start

align-content: flex-end

align-content: space-around

align-content: space-between

align-content: stretch

ترتیب نمایش عناصر آیتم های flex به کمک صفت order در css

با استفاده از ویژگی order در CSS میتوان ترتیب چیدمان یک یا چند آیتم از فلکس باکس را بصورت سفارشی را مشخص و یا تعریف کرد.

مثلا میتونیم مشخص کنیم که عنصر شماره ۱ در مکان شماره ۳ از ظرف فلکس قرار بگیرد و یا مثلا آیتم شماره ۲ در مکان شماره ۱ و.. به راحتی با استفاده از این ویژگی میتوان این کار را انجام داد.

برای کسب اطلاعات بیشتر در این خصوص مقاله آموزش ویژگی order را مطالعه کنید.

ویژگی align-self در فلکس باس

ویژگی دیگری که برای شخصی سایزی ایتم ها موجود در فلکس باکس می توانید استفاده کنید align-self است. با استفاده از ویژگی align-self در CSS می توانید برای هر یک از آیتم های موجود در یک ظرف فلکس تراز یا موقعیت قرار گیری مستقل را مشخص کنید.

این ویژگی دقیقا مقادیر مربوط به align-items را می پذیر و برای یک ایتم خاص مورد استفاده قرار می گیرد. به عبارتی همانطور که پیش تر توضیح داده شد، ویژگی align-items تراز آیتم های یک فلکس را مشخص کرده و بروی تمامی آیتم ها عمل می کند، ولی ویژگی align-self می تواند فقط بروی یک آیتم خاص کار کند.

برای کسب اطلاعات بیشتر در مورد این خاصیت، حتما مقاله ویژگی align-self را مطالعه کنید.

ویژگی flex-grow در css

به مثال های ابتدایی فوق توجه کنید. موقعی که ما از display flex استفاده می کنیم احتمالا با تصویر زیر روبرو خواهیم شد.

فضایی خالی که به دو علت بوجود خواهد آمد:

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

خاصیت flex-grow چه کمکی می کند؟ با تعیین ویژگی flex-grow برای هر عنصر، می‌توانیم هر عنصر را مجبور کنیم که به دلخواه ما جای خالی رو پر کند. اما چطور؟

این ویژگی، اعداد رو به عنوان مقادیر قبول می‌ کند و جای خالی ایجاد شده روا به عنوان عدد ۱ در نظر خواهد گرفت. به عبارتی دیگر اگر مثلا به div قرمز، دستور flex-grow: 1 رو اختصاص بدهیم، با تصویر زیر مواجه خواهیم شد.

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
        }
        .container div{
            width:100px;
   height:100px;
   margin:10px;
        }
        .div1{
            background-color: blue;
            
                }
        .div2{
            background-color: red;
            flex-grow:1;
        }
        .div3{
background-color: green;

        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

باتوجه به چیزی که گفته شد، ما می‌ توانیم جای خالی ایجاد شده را با چند div مختلف هم پر کنیم، برای اینکار می توانید از کد می توانید از کد flexbox زیر الگو بگیربد.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            flex-direction: row;
        }
        .container div{
            width:100px;
   height:100px;
   margin:10px;
        }
        .div1{
            background-color: blue;
            
                }
        .div2{
            background-color: red;
            flex-grow:0.5;
        }
        .div3{
background-color: green;
flex-grow:0.5;

        }
        .div4{
            background-color: yellow;
        }
    </style>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/loader.png');}:root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warning-1.png');}:root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https://www.aryatehran.com/wp-content/uploads/2021/10/checked.png');}:root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https://www.aryatehran.com/wp-content/uploads/2021/10/warn.png');}:root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https://www.aryatehran.com/wp-content/themes/arya/assets/images/logo.png');}:root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https://www.aryatehran.com/wp-content/uploads/2021/10/electrical-danger-sign.png');}:root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https://www.aryatehran.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":"button.load-more-comment.loading","style":":root{--wpr-bg-3218b2f7-65d2-4659-ad24-6f8e3b6228eb: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/loader.png');}"},{"selector":".tip-icon-danger","style":":root{--wpr-bg-fb1c632f-eae0-4254-be3b-8d7ab35454bd: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warning-1.png');}"},{"selector":".tip-icon-success","style":":root{--wpr-bg-a8e47f1c-de1a-4f0f-a291-5125952c461d: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/checked.png');}"},{"selector":".tip-icon-alert","style":":root{--wpr-bg-62bdee03-98a0-4d4a-aa4c-b71f24e4115e: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/warn.png');}"},{"selector":".tip-icon-warning","style":":root{--wpr-bg-eb1060ce-e084-4e9e-9534-b6fda66050e2: url('https:\/\/www.aryatehran.com\/wp-content\/themes\/arya\/assets\/images\/logo.png');}"},{"selector":".tip-icon-info","style":":root{--wpr-bg-a29fc7eb-de76-4a08-8f61-295a9cc543e9: url('https:\/\/www.aryatehran.com\/wp-content\/uploads\/2021\/10\/electrical-danger-sign.png');}"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-491c7307-3fc7-4928-b559-129fea9eca10: url('https:\/\/www.aryatehran.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}"}];</script></head>
<body>
    <div class="container">
        <div class="div1">آبی</div>
        <div class="div2">قرمز</div>
        <div class="div3">سبز</div>
        <div class="div4">زرد</div>
    </div>
<script src="https://www.aryatehran.com/wp-content/cache/min/1/80b9bf06ed41dc1df71ca40fa82f0f7c.js" data-minify="1"></script></body>
</html>

در کد بالا ما به هر یک از div های قرمز و سبز flex-grow با مقدار ۰٫۵ اختصاص دادیم تا بصورت برابر فضای خالی موجود را پر کنند.

خاصیت flex-shrink

در صفحه آرایی flexbox، خاصیت Flex shrink در css ، کاملا برعکس خاصیت flex-grow رفتار می‌کند. در واقع یعنی با کوچکتر شدن صفحه، عنصر فرزندی که دارای مقدار flex-shrink بیشتری است، به نسبت بقیه عناصر فرزند، عرض کوچکتری را به خودش اختصاص خواهد داد.

خاصیت flex-basis

خاصیت flex basis در صفحه آرایی با flexbox، اندازه و ابعاد یک آیتم flex رو مشخص می کند. از این ویژگی می‌ توا نیم به جای width، زمانی که flex-direction ما row است و به جای height، زمانی که flex-direction ما column استفاده کنیم.

مقادیر مرتبط با ویژگی flex-basis عبارتند از:

auto: مقدار پیش فرض (ابعاد عنصر متناسب با محتوای آن خواهد بود)
مقدار عددی بر حسب واحد های نامتغیر
مقدار درصدی

flex-flow: column wrap

تفاوت Grid با Flexbox در CSS چیست ؟

در ابتدا باید تذکر داد که هیچ کدام از این دو ماژول بر دیگری برتری نداشته و هر کدام در جای خود مناسب و کاربردی هستند. بنابراین باید با توجه به نیاز، بهترین و مناسب‌ ترین ماژول را انتخاب کرد. همچنین می‌ توان به طور همزمان از Flexbox و CSS Grid استفاده کرد تا کار با قالب بندی و Layout آسان‌ تر شود.

Flexbox و Grid شباهت‌ های زیادی با هم دارند و جز بهترین و پر کاربرد ترین مدل‌ های طراحی محسوب می‌ شوند. اما تفاوت‌ هایی نیز دارند که قابل اهمیت است. مانند:

طراحی تک بعدی و دو بعدی
اولویت در محتوا یا طراحی
پیچیدگی تعیین اندازه‌ المان‌های طراحی

طراحی تک بعدی و دو بعدی

یکی از تفاوت های ویژگی Grid با Flexbox در CSS طراحی در بعد است. معمولا در طراحی صفحات وب معمولا عناصر را به دو حالت تک‌ بعدی و دو بعدی در نظر می‌ گیرند.

مثلا به منو‌ی سایت آموزشگاه طراحی سایت آریا تهران توجه کنید، این منو به عنوان طراحی تک بعدی شناخته می‌ شود، یعنی در یک مسیر یا یک جهت قرار گرفته است ( فقط در جهت محور طول ). برای پیاده‌ سازی چنین چیزی بهتر است از FlexBox استفاده کنیم، البته با CSS Grid هم این کار شدنی است اما FlexBox با کد کمتر و کیفیت بهتر این کار را انجام می‌ دهد.

در طرف مقابل ساختار دو بعدی را داریم. مثلا منوی بالای صفحه با منوی کنار صفحه یک سایت را کنار یکدیگر به عنوان یک عنصر دو بعدی در نظر بگیرید. یعنی المان‌ها در دو بعد یا دو جهت قرار گرفته اند. در این حالت استفاده از CSS grid توصیه می‌شود. چون سرعت کار را بالا برده و خروجی بهتری می‌ دهد.

پیشنهاد ویژه: اگر به ساختن یک منوی حرفه ای علاقمند هستید حتما فیلم های آموزشی موجود در مقالات تگ nav در html و همچنین تگ header را مشاهده کنید.

اولویت در محتوا یا طراحی

اگر قبل از طراحی محتوای سایت خود را بدانید، استفاده از Flexbox مزیت بزرگی خواهد بود. اما به علت پیچیدگی تعیین اندازه‌ آیتم‌ها در Flexbox، اگر ابتدا قصد طراحی صفحات را دارید تا بعدا نوع محتوای آن را تعیین کنید، استفاده از CSS Grid اهمیت بیشتری پیدا می‌ کند.

پیچیدگی تعیین اندازه‌ المان‌های طراحی

همانطور که پیش تر گفته شد، FlexBox عنوانی اختصاری و برگرفته از Flexible Box یا جعبه‌ی منعطف است. به این معنی که آیتم‌ ها ( تگ های html ) با هر اندازه‌ ای می‌ توانند درون آن، جا بگیرند. این مسئله هم یکی از نقاط قوت این ویژگی است و هم اینکه باعث پیچیدگی تعیین اندازه‌ آیتم‌ ها می‌ شود. در حالی که CSS Grid در چنین مواردی کمتر شما را به زحمت می‌ اندازد.

آموزش جامع Flexbox در CSS

در مقاله آموزش flexbox در css سعی شد تا بصورت کامل در مورد کاربرد display flex در css توضیح داده شود. همچنین فیلم آموزش فلکس باکس در ابتدای همین صفحه قرار گرفت.

برای یادگیری کامل تر آموزش FlexBox در CSS می توانید از وب سایت flexboxfroggy.com استفاده کنید. در این وب سایت به کمک بازی با مفاهیم فلکس باکس آشنا خواهید شد.

تمرین فلکس باکس

تصویر زیر مرحله ۲۴ آموزش مفهوم flexbox از وب سایت flexboxfroggy.com است. بنظر شما جواب چیست؟ به افرادی که جواب درست را قسمت نظرات همین صفحه کامنت کنند ۲۰ هزار تومان شارژ پنل کاربری وب سایت www.tele-teachers.com هدیه داده خواهد شد.

پیشنهاد مطالعه: برای شروع یادگیری html و css شاید اولین مقاله ای که باید بخوانید doctype html چیست است. شروع کنید.

سوالات متداول در مورد display flex در css

در ادامه به پاسخ برخی سوالت متداول خواهیم پرداخت

صفحه آرایی با فلکس باکس یا grid ؟

همانطور که در متن مقاله توضیح داده شد، جواب این سوال به تعیین سه پرسش مربوط است. ۱-طراحی ما تک بعدی است یا دو بعدی ؟ ۲- اولویت در محتوا است یا طراحی ؟ ۳- پیچیدگی تعیین اندازه‌ المان‌ های طراحی چقدر در کار ما تاثیرگذار خواهد بود؟

می توان از flex-flow بجای flex-wrap استفاده کرد؟

همانطور که در متن مقاله کامل توضیح داده شده، از این این ویژگی می توانید بصورت همزمان بجای flex-wrap و flex-direction استفاده کنید. مثلا flex-flow:column-reverse wrap-reverse

مقاله قبلی ما تحت عنوان تگ body در html را مطالعه کنید.

→ رسم جدول در پاورپوینت

رسم نمودار در پاورپوینت ←

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

ناشناس – ۲۱ آذر ۱۴۰۲ ساعت ۱۴:۴۳

خیلی ممنون.
منحیث یک تبعه افغانستانی آموزش هاتون دنبال میکنم واقعا عالی توضیح دادید به هر تیپ انسانا در هر level که باشه میتونه برداشت کنه و یاد بگیره
- aryatehran_B – ۲۱ آذر ۱۴۰۲ ساعت ۱۴:۴۷
  
  درود خیلی خوشحالیم که توانسته اید بهره ببرید از مطالب سایت دوست عزیز
★★★★★

مهدی – ۱۶ مهر ۱۴۰۲ ساعت ۰۶:۲۳

کم نظیر بود این مقاله،واقعا جامع و شیوا ،ممنونم
میلاد – ۱ مرداد ۱۴۰۲ ساعت ۰۵:۴۲

سلام،
خیلی خیلی عالی بود . ممنون از اطلاعات مفیدتون .🌹
- aryatehran_B – ۳ مرداد ۱۴۰۲ ساعت ۱۳:۱۰
  
  سلام خیلی ممنون از شما دوست عزیز
بارانا – ۱۸ اردیبهشت ۱۴۰۲ ساعت ۱۵:۳۱

خیلی عالییییییی بود
ممنونم
- aryatehran_B – ۱۹ اردیبهشت ۱۴۰۲ ساعت ۱۰:۲۳
  
  سلام عرض شد خیلی ممنون از نظر شما دوست عزیز
رضا – ۱۰ بهمن ۱۴۰۱ ساعت ۱۹:۲۷

بابا دمتون گرم خیلی خوب و عالی توضیح می دید آدم می فهمه یعنی همه مقالاتتون خوبه js هم خیلی تمیز توضیح می دید!
- aryatehran_B – ۱۱ بهمن ۱۴۰۱ ساعت ۱۱:۲۴
  
  سلام عرض شد خیلی ممنون از شما دوست عزیز
هانا – ۶ بهمن ۱۴۰۱ ساعت ۰۸:۲۶

بسیار عالی و جامع بود خیر ببینید.ممنون
- aryatehran_B – ۶ بهمن ۱۴۰۱ ساعت ۱۴:۴۷
  
  سلام عرض خیلی ممنون که راضی بودید
هانا – ۶ بهمن ۱۴۰۱ ساعت ۰۸:۲۴

بسیار عالی و جامع بود خیر ببینید.ممنون
- aryatehran_B – ۶ بهمن ۱۴۰۱ ساعت ۱۵:۰۱
  
  سلام عرض شد خیلی ممنون از نظر شما
مریم – ۴ دی ۱۴۰۱ ساعت ۲۲:۳۱

بسیار عالی و کامل توضیح داده شده. ممنون از شما
- aryatehran_B – ۵ دی ۱۴۰۱ ساعت ۱۲:۰۳
  
  سلام عرض شد خواهش میکنم ممنون از شما
حدیث – ۱۲ آذر ۱۴۰۱ ساعت ۰۸:۴۶

سلام
مقاله خیلی مفید و کاملی بود.

فقط در قسمت flex-wrap: wrap کد css تکمیل نیست. (مفهوم مشخصه ولی برای برطرف کردن خطا اشاره کردم)
پیشنهاد دوم اینکه کدهای html و css را اگر در باکس های بدون اسکرول بار می گذاشتید، بهتر بود چون در یک نگاه دیده میشد و احتیاجی به اسکرول کردن نداشت.

سپاس فراوان از اینکه به ریز موارد رو با مثال توضیح دادید.
- aryatehran-T – ۱۳ آذر ۱۴۰۱ ساعت ۰۸:۲۷
  
  سلام خیلی ممنون از نظر شما بله حتما لحاظ میشه
neda – ۱۷ آبان ۱۴۰۱ ساعت ۱۴:۰۴

خیلی کامل و قابل فهم بود
شیراحمد حیاتی – ۱۷ آبان ۱۴۰۱ ساعت ۰۸:۳۲

خیلی عالی و قشنگ
فاطمه – ۲۹ مهر ۱۴۰۱ ساعت ۲۱:۰۱

سلام چقدر خوب و قشنگ توضیح داده شده خدا قوت😍❤️
حبیب – ۹ اردیبهشت ۱۴۰۱ ساعت ۰۳:۰۲

بسیار‌عالی توضیح داده شده
امین – ۳ اسفند ۱۴۰۰ ساعت ۱۶:۲۶

ممنون

آموزش رایگان HTML و CSS رو از دست نده!

آموزش رایگان 0 تا 100 طراحی سایت رو از دست نده

flexbox در css

flexbox چیست ؟

کاربرد flexbox چیست

مزایای استفاده از FlexBox چیست؟

شیوه کار با display flex در css

دستورات مربوط به فلکس باکس

flex-direction در css

مثال از flex-direction در css

justify-content در css

justify-content: center

justify-content: flex-start

justify-content: flex-end

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

ویژگی align-items در css

align-items: center

align-items: flex-start

align-items: flex-end

align-items: stretch

align-items: baseline

flex-wrap در css

flex-wrap: wrap

flex-wrap: wrap-reverse

flex-wrap: nowrap

ویژگی flex-flow در css

ویژگی align-content در CSS3

align-content: flex-start

align-content: flex-end

align-content: space-around

align-content: space-between

align-content: stretch

ترتیب نمایش عناصر آیتم های flex به کمک صفت order در css

ویژگی align-self در فلکس باس

ویژگی flex-grow در css

خاصیت flex-shrink

خاصیت flex-basis

تفاوت Grid با Flexbox در CSS چیست ؟

طراحی تک بعدی و دو بعدی

اولویت در محتوا یا طراحی

پیچیدگی تعیین اندازه‌ المان‌های طراحی

آموزش جامع Flexbox در CSS

تمرین فلکس باکس

سوالات متداول در مورد display flex در css

بوت استرپ چیست

event در جاوا اسکریپت

فریم ورک های جاوا اسکریپت

تگ a در html

flexbox در css

Display در CSS

ورود یا ثبت نام