فلکس باکس

فلکس باکس چیست؟

فلکس باکس توانایی های پیچیده تر و بیشتری از inline‌ و block داره و می‌تونه عناصر موجود در صفحه وب رو به راحتی پشت سر هم به صورت سطر یا ستون بچینه.

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

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

مقدار flex

برای شروع آشنایی با فلکس باکس در CSS ، به مثال زیر توجه کنین:

<div id=&quotcontainer&quot>

<div id=&quotdiv1&quot></div>

<div id=&quotdiv2&quot></div>

<div id=&quotdiv3&quot></div>

<div id=&quotdiv4&quot></div>

</div>

استایل دهی:

#container{

display:flex;

}

#container div{

width:100px;

height:100px;

margin:10px;

}

#div1{

background-color:red;

}

#div2{

background-color:green;

}

#div3{

background-color:blue;

}

#div

background-color:orange;}

نتیجه:

همونطور که میبینیم، ۴ عنصر div داریم که داخل یه عنصر div پدر جا داده شدن.

برای اینکه بین عناصر داخلی، طبقه بندی flexbox رو برقرار کنیم، display:flex رو به عنصر پدرشون اختصاص دادیم.

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

پس اولین تاثیر display:flex، اینه که عناصر داخلی رو، هر چی هم که باشن، در راستای یک خط مرتب می‌کنه، و اینکه خاصیت فلکس به صورت پیش فرض عناصر رو در حالت row یا به صورت خطی چیدمان و مرتب میکنه که اگه بخوایم به صورت ستونی مرتب بشن باید flex-direction رو تغییر بدیم که در ادامه بیشتر توضیح داده میشه.

حالا تنظیماتی که ما میتونیم با استفاده از دستور فلکس انجام بدیم به شرح زیر هست

flex-direction 

justify-content 

align-content 

align-items

flex-wrap

flex-grow

flex-shrink

flex-basis

flex-flow

خاصیت flex-direction

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

این خاصیت 4مقدار میتونه بگیره:

row: عناصر رو در راستای سطر قرار میده.

column: عناصر رو در راستای ستون قرار میده.

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

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

#container{

flex-direction:column

}

تو تکه کد بالا مثال قبل رو فقط flex-direction رو در حالت column قرار دادیم که نتیجه تصویر زیر میشه

حالا این دفعه flex-direction رو برابر رو column-reversقرار میدیم؛ نحوه تغییر چیدمان رو تو نتیجه ببینیم:

#container{

flex-direction: column-reverse;

}

ترتیب چیدمان مقادیر کاملا برعکس شدن. مقدار row و row-revers هم به همین شکل اما به صورت سطری عمل میکنن.

خاصیت flex-grow

به این عکس توجه کنین

این عکس مربوط به تیکه کد مثال اول هست؛ به فضای خالی که وجود داره توجه کنین، ما برای این فضای خالی رو از بین ببریم و بتونیم div هامون رو بزرگتر کنیم از خاصیت flex-grow استفاده میکنیم. به این خاصیت مقدار عددی داده میشه تو تصویر زیر flex-grow:1 مقدار 1 که داده میشه چون فقط یکی از عناصر ما این خاصیت رو گرفته پس div دوم میاد تمامی فضای خالی که وجود داره پر میکنه؛ حالا اگه به چند تا عنصر داده بشه هر کدوم میان به اندازه مقدار grow فضای خالی رو پر میکنه.

خاصیت flex-wrap

وقتی ما عناصرمون توی یک صفحه تعدادش بیشتر میشه، نیاز هست که تعدادی این عناصر به سطر بعد منتقل بشن برای اینکه عناصر ما در اندازه های مشخص خودشون بتونن نمایش داده بشن، برای اینکه به عنصر پدر flex-wrap:wrap میدم در این صورت اندازه مرورگر ما تغییر که پیدا میکنه عناصر اضافی به سطر بعد منتقل میشن این خاصیت در ریسپانسیوسازی به درد ما میخوره ، این خاصیت سه مقدار زیر رو میتونه بگیره:

no-wrap: مقدار پیش فرضی که عناصر رو در یک خط یا ستون میچینه.

wrap: مقداری که عناصر رو، به ترتیب بین خطوط و ستون ها تقسیم می‌کنه.

wrap-reverse: مقداری که عناصر رو، بر خلاف ترتیب بین خطوط و ستون ها تقسیم می‌کنه

خاصیت flex-shrink

این خاصیت دقیقا برعکس grow میباشد و از عرض عنصر با توجه به مقدار داده شده کم میکند.

خاصیت flex-flow

این خاصیت در واقع shorthand مقدار flex-direcrtion و flex-wrap هست که با نوشتن دستور زیر کد ما کوتاهتر میشه

#container{

display:flex;

flex-flow:row wrap;با این خاصیت عناصر ما به صورت سطری قرار میگیرند و هم چنین  با عناصر اضافی به 
 سطر بعد منتقل میشن.

خاصیت flex-basis

خاصیت flex basis در CSS ، اندازه و ابعاد یک آیتم flex رو مشخص می‌کنه.

از این خاصیت می‌تونیم به جای width، زمانی که جهت flex ما خطیه، و به جای height، زمانی که جهت flex ما ستونیه استفاده کنیم.

مقادیر مورد قبول این خاصیت عبارتند از:

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

خاصیت justify-content

این خاصیت عناصر را در محور افقی ترازبندی میکند.

مقادیری که این خاصیت داره به شرح زیر هست

center : عناصر رو دار وسط صفحه در محور افقی قرار میدهد

| flex-start عناصر را از ابتدای صفحه چیدمان میکند 

 | flex-end عناصر را از انتهای صفحه چیدمان میکند

| space-between بین عناصر فضای خای ایجاد میکند  

| space-around بین عناصر فضای خالی ایجاد میکند با این تفاوت که به اولین و آخرین عنصر هم از راست و چپ صفحه فاصله میدهند.

خاصیت align-items

این خاصیت عناصر را در محور عمودی ترازبندی میکند.

مقادیری که این خاصبت دارد به شرح زیر است:

center عناصر رو در محور عمودی در وسط قرار میدهد 

flex-start: مقادیر را در محور عمودی در ابتدای صفحه قرار میدهد

flex-end مقادیر را در محور صفحه در انتهای صفحه قرار میدهد

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

baseline:baseline: 

عناصر فرزند، در راستای خط مبدا خودشون تراز میشن.

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

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

بر اساس همین تعریف، کافیه که محتوای هر عنصر رو یکم تغییر بدیم و ببینیم که این مقدار چطور رفتار میکنه:

مثال strech

مثال baseline

و در پایان امیدوارم این مقاله برتون مفید بوده باشه