بررسی ظرف فلکس(Flex Container) در CSS

امتیاز

(0)

ویژگی های ظرف فلکس(Flex Container) در CSS

عنصر ظرف فلکس، می تواند ویژگی های زیر را داشته باشد:

display : باید برابر با flex یا inline-flex باشد.
flex-direction : جهت نمایش آیتم های فلکس را تنظیم می کند.
flex-wrap : مشخص می کند که آیا آیتم های فلکس باید بسته بندی(wrap) شوند یا نه.
flex-flow : این یک ویژگی خلاصه شده برای ویژگی های flex-direction و flex-wrap می باشد.
justify-content : آیتم های فلکس را وقتی که از تمام فضای روی محور اصلی(main-axis) استفاده نمی کنند، تراز می کند(به صورت افقی).
align-items: آیتم های فلکس را وقتی که از تمام فضای روی محور متقاطع(cross-axis) استفاده نمی کنند، تراز می کند(به صورت عمودی).
align-content : خطوط فلکس را وقتی که در محور متقاطع(main-axis) فضای اضافی وجود دارد و آیتم های فلکس بسته بندی(wrap) می شوند، تراز می کند.

ویژگی flex-direction در CSS

ویژگی flex-direction جهتِ نمایشِ آیتم های فلکس را در ظرف فلکس(flex container) مشخص می کند. این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

row (پیش فرض)
column
row-reverse
column-reverse

مثال شماره 1

مقدار row پیش فرض است و آیتم های فلکس را به صورت افقی (در جهت راست چین، از سمت راست به چپ) نمایش می دهد:

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

نتیجه:

امتحان کنید

مثال شماره 2

مقدار column باعث می شود آیتم های فلکس به صورت عمودی (از بالا به پایین) نمایش داده شوند:

.flex-container {
  display: flex;
  flex-direction: column;
}

نتیجه:

امتحان کنید

مثال شماره 3

مقدار row-reverse آیتم های فلکس را به صورت افقی نمایش می دهد( اما از چپ به راست در چینش راست چین):

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

نتیجه:

امتحان کنید

مثال شماره 4

مقدار column-reverse آیتم های فلکس را به صورت عمودی نشان می دهد (اما از پایین به بالا):

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

نتیجه:

امتحان کنید

ویژگی flex-wrap در CSS

ویژگی flex-wrap مشخص می کند که آیا آیتم های فلکس باید بسته بندی(wrap) شوند یا خیر؛ در صورتی که فضای کافی در خط فلکس برای آنها وجود نداشته باشد. این ویژگی می تواند یکی از مقادیر زیر را داشته باشد:

nowrap (پیش فرض)
wrap
wrap-reverse

مثال شماره 5

دستور flex-wrap: nowrap مشخص می کند که آیتم های فلکس بسته بندی(wrap) یا شکسته نخواهند شد(این پیش فرض است):

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

نتیجه:

امتحان کنید

مثال شماره 6

دستور flex-wrap: wrap مشخص می کند که آیتم های فلکس در صورت لزوم، بسته بندی(wrap) یا شکسته شوند:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

نتیجه:

امتحان کنید

مثال شماره 7

دستور wrap-reverse مشخص می کند که آیتم های فلکس در صورت لزوم، بسته بندی(wrap) یا شکسته شوند، اما به صورت معکوس:

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

نتیجه:

امتحان کنید

استفاده از ویژگی flex-flow در CSS

ویژگی flex-flow درواقع یک ویژگی خلاصه شده از ویژگی های flex-direction و flex-wrap است.

مثال شماره 8

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

امتحان کنید

استفاده از ویژگی justify-content در CSS

از ویژگی justify-content برای تراز کردن آیتم های فلکس، وقتی که تمام فضای در دسترس را در محور اصلی(main-axis) استفاده نمی کنند(به صورت افقی) استفاده می شود. این ویژگی می تواند یکی از مقادیر زیر را دریافت کند:

center
flex-start (پیش فرض)
flex-end
space-around
space-between
space-evenly

مثال شماره 9

استفاده از مقدار center باعث می شود آیتم ها در وسط ظرف(container) قرار گیرند.

.flex-container {
  display: flex;
  justify-content: center;
}

نتیجه:

امتحان کنید

مثال شماره 10

مقدار flex-start آیتم ها را در ابتدای ظرف(container) تراز می کند(این پیش فرض است):

.flex-container {
  display: flex;
  justify-content: flex-start;
}

نتیجه:

امتحان کنید

مثال شماره 11

مقدار flex-end باعث می شود آیتم های فلکس در انتهای ظرف(container) تراز شوند:

.flex-container {
  display: flex;
  justify-content: flex-end;
}

نتیجه:

امتحان کنید

مثال شماره 12

مقدار space-around آیتم های فلکس را به همراه فضایی به دور آنها نمایش می دهد:

.flex-container {
  display: flex;
  justify-content: space-around;
}

نتیجه:

امتحان کنید

مثال شماره 13

مقدار space-between باعث می شود آیتم های فلکس با فضایی بین آنها نمایش داده شوند:

.flex-container {
  display: flex;
  justify-content: space-between;
}

نتیجه:

امتحان کنید

مثال شماره 14

دستور space-evenly باعث می شود آیتم های فلکس با فاصله ی مساوی، بین یکدیگر نشان داده شوند:

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

نتیجه:

امتحان کنید

ویژگی align-items در CSS

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

center
flex-start
flex-end
stretch
baseline
normal (پیش فرض)

در مثال های زیر، از یک ظرف(container) با ارتفاع 200 پیکسل استفاده کرده ایم تا ویژگی align-items را بهتر توضیح دهیم.

مثال شماره 15

اگر از مقدار center استفاده کنیم، باعث می شود آیتم های فلکس در وسط ظرف(container) تراز شوند:

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

نتیجه:

امتحان کنید

مثال شماره 16

با استفاده از مقدار flex-start آیتم های فلکس در بالای ظرف(container) تراز می شوند:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}

نتیجه:

امتحان کنید

مثال شماره 17

با استفاده از مقدار flex-end آیتم های فلکس در پایین ظرف(container) تراز می شوند:

.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}

نتیجه:

امتحان کنید

مثال شماره 18

.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}

نتیجه:

امتحان کنید

مثال شماره 19

مقدار baseline باعث می شود آیتم های فلکس در خط پایه ی ظرف تراز شوند:

.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
}

نکته: در این مثال، از font-size های مختلف برای نشان دادن اینکه آیتم های فلکس توسط خط پایه(baseline) متن تراز شده اند، استفاده شده است:

نتیجه:

امتحان کنید

ویژگی align-content در CSS

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

center
stretch (default)
flex-start
flex-end
space-around
space-between
space-evenly

ما در مثال های زیر، از یک ظرف(container) با ارتفاع 400 پیکسل استفاده کرده ایم و از مقدار wrap برای ویژگی flex-wrap استفاده کرده ایم تا بتوانیم ویژگی align-content را بهتر نشان دهیم:

مثال شماره 20

از دستور align-content: center برای بسته بندی کردن خطوط فلکس در مرکز ظرف(container) استفاده می شود:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: center;
}

نتیجه:

امتحان کنید

مثال شماره 21

با استفاده از مقدار stretch خطوط فلکس کشیده می شوند تا فضای باقی مانده از ظرف(container) را اشغال کنند:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: stretch;
}

نتیجه:

امتحان کنید

مثال شماره 22

با استفاده از مقدار flex-start خطوط فلکس در ابتدای ظرف(container) بسته بندی می شوند:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: flex-start;
}

نتیجه:

امتحان کنید

مثال شماره 23

با استفاده از دستور align-content: flex-end خطوط فلکس در انتهای ظرف(container) قرار می گیرند:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: flex-end;
}

نتیجه:

امتحان کنید

مثال شماره 24

با استفاده از مقدار space-between فاصله ی بین خطوط فلکس برابر خواهد بود اما آیتم اول با ضلع شروع ظرف(container) تراز می شود و آخرین آیتم با ضلع پایان ظرف(container) تراز می شود:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-between;
}

نتیجه:

امتحان کنید

مثال شماره 25

با استفاده از مقدار space-around فاصله ی بین خطوط فلکس برابر خواهد بود، اما فضای قبل از آیتم اول و فضای بعد از آخرین آیتم برابر با نصف فضای بین خطوط فلکس خواهد بود:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-around;
}

نتیجه:

امتحان کنید

مثال شماره 26

با استفاده از مقدار space-evenly خطوط فلکس به طور مساوی در ظرف(container) فلکس توزیع می شوند به طوری که در بالا و پایین و بین آنها فضای مساوی وجود داشته باشد:

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-evenly;
}

نتیجه:

امتحان کنید

در وسط قرار دادن عناصر

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

مثال شماره 27

.flex-container {
  display: flex;
  height: 400px;
  justify-content: center;
  align-items: center;
}

امتحان کنید

تاریخ انتشار : 30 آبان 1404.
تاریخ بروزرسانی : 04 آذر 1404.
بازدید: 42

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.