فلکس باکس CSS

طرح فلکس باکس CSS یک سیستم طرح یک بعدی است ، به این معنی که از دو ردیف یا ستون استفاده می کند . هدف از flexbox تراز و قرار دادن عناصر در یک ردیف است. ردیف فلکس عناصر را کنترل می کند تا از سرریز یا فضای زیاد جلوگیری کند.

معرفی فلکس باکس CSS

ساختار یک طرح انعطاف پذیر براساس تقسیم عناصر به containers (عناصر والدین) و items (عناصر کودک) است. مثال زیر یک flexbox CSS پایه ایجاد می کند.

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

.flex-item {
  width: 100px;
  margin: 10px;
}

مثال بعدی یک گالری عکس responsive ایجاد می کند.

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 25px;
}
.flex-item {
  background-color: lightgray;
  background-position: center center;
  background-size: cover;
  margin: 2px;
  flex: auto;
  height: 240px;
  flex-basis: 150px;
}

این مثال استفاده ازفلکس باکس CSS را برای ایجاد طرح بندی وب سایت ریسپانسیو نشان می دهد.

<iframe src="https://www.bitdegree.org/learn/" height="500" style="width: 100%; border: 1px solid #eee;"></iframe>

به یاد داشته باشید: فلکس باکس CSS یک بعدی است. بنابراین ، موارد را به طور همزمان در هر دو بعد عمودی و افقی ترسیم نمی کند.

اختصاص خصوصیات به عنصر والد از اختصاص آن ها به هر عنصر کودک به طور جداگانه سودمندتر است. این خصوصیات امکان سازماندهی وسایل درون ردیف را فراهم می کند (بعضی از آنها برای عناصر والدین اعمال می شوند ، برخی دیگر مربوط به کودکان است).

فلکس باکس CSS می تواند جنبه های زیر را در طرح کنترل کند:

• جهتی که موارد به آن نمایش داده می شوند
• بسته بندی موارد هنگام تغییر اندازه پنجره
• توجیه موارد و فاصله در این بین
• تراز بندی عمودی موارد
• تراز شدن خطوط موارد
• ترتیب موارد در یک خط
• توانایی بزرگ شدن یا کوچک شدن موارد در هنگام تغییر اندازه پنجره
• تراز بندی یک مورد منفرد

محور فلکس باکس CSS

فلکس باکس CSS دارای دو محور اصلی و ضربدری است.

• شما محور اصلی را با خاصیت flex-direction تعریف می کنید. چهار مقدار ممکن دارد: ردیف ، ردیف معکوس ، ستون و ستون معکوس.

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

• محور عرضی همیشه عمود (⟂) به محور اصلی می رود. اگر محور اصلی دارای یک جهت ردیف یا معکوس ردیف باشد ، محور عرضی در امتداد یک ستون یا جهت معکوس ستون اجرا می شود (و بالعکس).

توجه: درک محورهای CSS flexbox برای تراز کردن CSS و توجیه موارد flex در کنار آنها ضروری است.

Flex containers

CSS flex container عنصری است که خاصیت نمایش را به صورت flex یا inline-flex تنظیم می کند. سپس ، همه کودکان تبدیل به موارد فلکس می شوند.

بنابراین ، ظرف CSS flex اندازه ، تراز و موقعیت فرزندان خود را تعریف می کند.

نکته: کودکان هر دو کانتینر فلکس درون خطی و کانتینر فلکس بلوک یکسان رفتار می کنند. کانتینرفلکس یا وسایل را برای پر کردن فضای موجود گسترش می دهد یا برای جلوگیری از سرریز شدن ، آن ها را کوچکتر می کند.

هر کانتینر فلکس در ابتدا دارای این مقادیر پیش فرض است:

• flex-direction: row
• justify-content: flex-start
• align-items: stretch
• align-content: stretch
• flex-basis: auto
• flex-wrap: nowrap

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

توجه: سایر خصوصیات مقادیر پیش فرض ندارند. اگر آن ها را تنظیم نکنید ، CSS آنها را در کانتینرشما اعمال نمی کند.

این صفحه تقلبی فلکس باکس CSS تمام ویژگی های کنترل کانتینر فلکس را توضیح می دهد.

Flex-direction

ویژگی CSS flex-direction موقعیت اقلام flex و جهتی را طی می کند که محور اصلی حرکت می کند.

بر اساس جهت مشخص شده (سطر یا ستون) ، محور اصلی افقی یا عمودی است. همچنین به طور خودکار محور عرضی را تنظیم می کند ، که محور عمود (⟂) به محور اصلی است.

مثال های CSS flex زیر نشان می دهد که چگونه  flex-direction  کانتینر فلکس و موارد آن را تغییر می دهد:

.flex-container { display: flex; flex-direction: column; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: ستون – جهت آیتم های flex از بالا به پایین است.

.flex-container { display: flex; flex-direction: column-reverse; } .flex-item { width: 100px; margin: 10px; }

flex-direction: row (پیش فرض) – جهت آیتم های flex از چپ به راست است.

.flex-container { display: flex; flex-direction: row; } 
.flex-item { width: 100px; margin: 10px; }

flex-direction: row-reverse – جهت آیتم های flex از راست به چپ است.

.flex-container { display: flex; flex-direction: row-reverse; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap

خاصیت CSS flex-wrap نحوه رفتار کانتینر در هنگام داشتن موارد بسیار زیاد را مشخص می کند. مقادیر flex-wrap احتمالی عبارتند از nowrap ، wrap و wrap-reverse.

توجه: خاصیت flex-wrap تعیین می کند که آیا سرریز باید بسته بندی شود یا خیر. اگر این ویژگی تنظیم نشده باشد ، عناصر به طور پیش فرض از ظرف سرریز می کنند.

مثال های CSS flex زیر نشان دهنده هر یک از مقادیر flex-wrap در عمل است.

flex-wrap: wrap – موارد به خط بعدی میپیچند (از بالا به پایین ، چپ به راست).

.flex-container { display: flex; flex-wrap: wrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: nowrap (پیش فرض) – موارد بسته بندی نمی شوند. در عوض ، آن ها ظرف را کوچک یا سرریز می کنند.

.flex-container { display: flex; flex-wrap: nowrap; } 
.flex-item { width: 100px; margin: 10px; }

flex-wrap: wrap-reverse – موارد در جهت معکوس ، از پایین به بالا قرار می گیرند (آخرین مورد به خط بالا می پیچد).

.flex-container { display: flex; flex-wrap: wrap-reverse; } 
.flex-item { width: 100px; margin: 10px; }

جریان انعطاف پذیر فلکس باکس CSS

Flex-flow  CSS ویژگی مختصر برای تعیین جهت انعطاف پذیر و انعطاف پذیر در یک اظهارنامه است. با استفاده از این مختصر ، شما محور اصلی و عرضی را برای کانتینرفلکس تعریف می کنید.

مقدار پیش فرض flex-flow ترکیبی از مقادیر پیش فرض دو ویژگی است.

مثال زیر نحوه عملکرد اعلامیه flex-flow: row nowrap را نشان می دهد:

.flex-container { display: flex; flex-flow: row wrap; } 
.flex-item { width: 100px; margin: 10px; }

Justify-content

Justify-content نحوه کنترل مرورگرها از فضای اطراف و بین عناصر در امتداد محور اصلی را تعیین می کند.

مقادیر موجود برای این ویژگی flex-start ، flex-end ، center ، فاصله بین ، فضای اطراف ، فضا به طور مساوی است.

مثال های flexbox زیر نحوه کار هر خاصیت را نشان می دهد.

justify-content: flex-start (پیش فرض) – مطالب را به سمت شروع یک کانتینرفلکس تنظیم می کند.

.flex-container { display: flex; justify-content: flex-start; } 
.flex-item { width: 100px; margin: 10px; }

justify-content: flex-end – محتوا را به انتهای یک کانتینر فلکس تراز می کند.

.flex-container { display: flex; justify-content: flex-end; } 
.flex-item { width: 100px; margin: 10px; }

justify-content: center – موارد را در مرکز محور اصلی قرار می دهد.

.flex-container { display: flex; justify-content: center; } 
.flex-item { width: 100px; margin: 10px; }

justify-content: فاصله بین – موارد و فضاهای بین آن ها را به طور مساوی توزیع می کند. اولین مورد به ابتدای خط می چسبد. آخرین مورد به انتهای خط می چسبد.

.flex-container { display: flex; justify-content: space-between; }
.flex-item { width: 100px; margin: 10px; }

justify-content: space-around – موارد را به طور مساوی توزیع می کند ، با فضای مساوی در اطراف هر یک از آنها.

.flex-container { display: flex; justify-content: space-around; }
.flex-item { width: 100px; margin: 10px; }

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

تراز کردن موارد

با استفاده از ویژگی align-items می توانید موارد ترازبند flexbox را تنظیم کنید.

این از محتوای توجیه پذیر متفاوت است زیرا به جای محور اصلی ، موارد را در امتداد محور عرضی تراز می کند. همزمان با یک خط سروکار دارد.

مقادیر ترازهای احتمالی  flex-start, flex-end, center, baseline, stretch هستند.

مثال های زیر نشان می دهد که چگونه یک طرح انعطاف پذیر با ویژگی flexbox align-items تبدیل می شود.

align-items: flex-start – موارد را به سمت شروع محور عرضی توزیع می کند.

.flex-container { display: flex; align-items: flex-start; } 
.flex-item { width: 100px; margin: 10px; }

align-items: flex-end – موارد را به سمت انتهای محور عرضی توزیع می کند.

.flex-container { display: flex; align-items: flex-end; } 
.flex-item { width: 100px; margin: 10px; }

align-items: center – موارد را در مرکز محور عرضی قرار می دهد.

.flex-container { display: flex; align-items: center; } 
.flex-item { width: 100px; margin: 10px; }

align-items: stretch (پیش فرض) – موارد را برای پر کردن کانتینر افزایش می دهد ، اما ویژگی های عرض حداقل / حداکثر عرض موارد منفرد را برطرف نمی کند.

.flex-container { display: flex; align-items: flex-end; } 
.flex-item { width: 100px; margin: 10px; }

align-items: baseline – موارد را در امتداد مبنای محتوای آنها (خطی که بیشتر حروف روی آن قرار می گیرند) تراز می کند. خط پایه به بلندترین مورد در یک خط بستگی دارد.

.flex-container { display: flex; align-items: baseline; } 
.flex-item { width: 100px; margin: 10px; }

تراز کردن محتوای فلکس باکس CSS

CSS به دلیل کوتاهی در ارائه روش های آسان برای متمرکز کردن عناصر مشهور بوده است. با این حال ، CSS flexbox می تواند یک یا چند مورد را در مرکز کانتینر قرار دهد. می توانید عناصر را با تنظیم justify-content و align-items  در center قرار دهید.

توجه: justify-content: center ، آیتم را با توجه به محور اصلی متمرکز می کند و موارد را تراز می کند: align-items: center را در امتداد محور عرضی قرار می دهد.

بنابراین ، مورد در مرکز هر دو بعد ظاهر می شود:

.flex-container { display: flex; align-items: center; justify-content: center; } 
.flex-item { width: 100px; margin: 10px;}

تراز کردن محتوا

ویژگی CSS align-content مشابه موارد align است ، اما خطوط موارد را در یک کانتینر تراز می کند. در امتداد محور عرضی کار می کند.

مقادیر محتوای تراز احتمالی عبارتند از: flex-start, flex-end, center, stretch, space-between, space-around.

توجه: اگر فقط یک خط از موارد در یک کانتینر وجود داشته باشد ، این ویژگی کار نمی کند.

مثال های زیر نحوه رفتار ویژگی align-content را با مقادیر مختلف با جزئیات نشان می دهد.

align-content: flex-start – خطوط را به سمت ابتدای ردیف توزیع می کند.

.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start; }
.flex-item { width: 100px; margin: 10px; }

align-content: flex-end – خطوط را به انتهای کانتینر توزیع می کند.

.flex-container { display: flex; flex-wrap: wrap; align-content: flex-end; } 
.flex-item { width: 100px; margin: 10px; }

align-content: center – خطوط را در مرکز کانتینر توزیع می کند.

.flex-container { display: flex; flex-wrap: wrap; align-content: center; }
.flex-item { width: 100px; margin: 10px; }

align-content: کشش (پیش فرض) – خطوط را برای استفاده از تمام فضای موجود کانتینر کشیده است.

.flex-container { display: flex; align-content: strech; flex-wrap: wrap; }
.flex-item { width: 100px; margin: 10px; }

align-content: space-between – خطوط را با توجه به جهت انعطاف پذیر توزیع می کند (اولین خط در ابتدا ، آخر – در انتهای کانتینر).

.flex-container { display: flex; align-content: space-between; flex-wrap: wrap; } 
.flex-item { width: 100px; margin: 10px;}

align-content: space-around – خطوط را به طور مساوی توزیع می کند و فضای اطراف خطوط را برابر نگه می دارد.

.flex-container { display: flex; align-content: space-around; flex-wrap: wrap; } 
.flex-item { width: 100px; margin: 10px; }

موارد فلکس

item CSS flex یک فرزند مستقیم از کانتینر فلکس است. هنگامی که عنصری را به عنوان کانتینر قرار دادید ، فرزندان آن به طور خودکار موارد منعطف می شوند.

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

به طور پیش فرض ، سه ویژگی دارای مقادیر اولیه هستند:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

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

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

به طور پیش فرض ، سه ویژگی دارای مقادیر اولیه هستند:

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

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

تنظیم خودکار مقدار flex-basic به این معنی است که مورد به اندازه کافی بزرگ باشد تا متناسب با محتوای آن باشد. اگر flex items کانتینر فلکس را پر کنند ، اما محتوای یک مورد به طور قابل توجهی بیشتر از موارد دیگر باشد ، فضای بیشتری برای متناسب کردن همه چیز پیدا می کند. این تنظیم پیش فرض بهترین طرح ممکن را تضمین می کند: در این صفحه تقلب flexbox به کلیه خصوصیات مربوط به دست زدن به موارد فلکس پرداخته شده است.

.flex-container { display: flex; }
.flex-item { width: 100px; margin: 10px; }

order

به طور پیش فرض ، flex items موجود در کانتینر به همان ترتیب که به صورت کد در می آیند (ترتیب منبع) ظاهر می شوند. می توانید این توالی را با ویژگی سفارش تغییر دهید.

شما باید یک عدد منفی یا مثبت به عنوان مقدار آن اختصاص دهید. با توجه به این اعداد ، کالاها مجدداً سفارش داده می شوند. کمترین اعداد در ابتدا قرار می گیرند (مقدار منفی قبل از 0 و اعداد مثبت است).

مثال زیر ویژگی order آیتم flex CSS را در عمل نشان می دهد.

<div class="flex-container">
	<div style="order: 2">1</div>
	<div style="order: 3">2</div>
	<div style="order: 1">3</div>
	<div style="order: 5">4</div>
	<div style="order: 4">5</div>
</div>

توجه: اگر چندین مورد با مقدار سفارششان برابر باشند ، آنها بر اساس ترتیب منبع در یک صف قرار می گیرند.

flex-grow

ویژگی flex-grow میزان انبساط یک کالای فلکس را نسبت به سایر اقلام مشخص می کند (اگر فضای درستی برای آن وجود داشته باشد). شما مقدار آن را با استفاده از اعداد مثبت و بدون واحد تنظیم می کنید. عدد نشان دهنده یک نسبت است.

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

توجه: اعداد منفی برای این ویژگی کار نمی کنند.

در مثال زیر ، مورد اول چهار برابر بقیه بزرگتر و کالای دوم در صورت وجود فضای کافی برای آن ، دو برابر بزرگتر رشد می کند.

<div class="flex-container">
	<div class="flex-item" style="flex-grow: 4">1</div>
	<div class="flex-item" style="flex-grow: 2">2</div>
	<div class="flex-item" style="flex-grow: 1">3</div>
	<div class="flex-item" style="flex-grow: 1">4</div>
	<div class="flex-item" style="flex-grow: 1">5</div>
</div>

shrink

ویژگیCSS flex-shrink  شبیه flex-grow است. با این حال ، flex-shrink نسبی را که در آن یک کالای فلکس بیشتر از سایر کالاهای موجود در آن ظرف کوچک می شود (زمانی که فضای کافی برای نگهداری اندازه اصلی وجود ندارد) مشخص می کند.

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

توجه: اعداد منفی با این ویژگی کار نمی کنند.

مثال بعدی نحوه عملکرد flex-shrink را نشان می دهد. اولین مورد را تنظیم کردیم که در مقایسه با سایر موارد دو برابر کوچک شود.

<div class="flex-container">
	<div class="flex-item" style="flex-shrink: 2">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item">4</div>
	<div class="flex-item">5</div>
</div>

basis

ویژگی  flex-based اندازه اولیه یک کالای flex را مشخص می کند. واحد ها یا درصد های طول را می پذیرد.

همچنین می توانید از مقدار خودکار (که مقدار پیش فرض است) استفاده کنید. طول منبع مورد را مقدار مبنای آن می داند. اگر طول در کد تنظیم نشده باشد ، محتوای مورد طول آن را تعیین می کند.

کلمات کلیدی به عنوان مقادیر نیز در دسترس هستند. با این حال ، برخی از آن ها منسوخ شده اند و تعداد معدودی که کار می کنند (مانند حداکثر محتوا ، محتوای کم و محتوای مناسب) از پشتیبانی مرورگر ضعیفی برخوردار هستند.

توجه: این ویژگی با مقادیر منفی کار نمی کند.

مثال زیر به شما کمک می کند مفهوم flex-based را بهتر درک کنید.

<div class="flex-container">
	<div class="flex-item" style="flex-basis: 250px">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item">4</div>
	<div class="flex-item">5</div>
</div>

flex

خاصیت flex خلاصه ای برای تعریف کلیه خصوصیات مورد مربوط به اندازه مورد در یک بیانیه است.

مختصر مختصات ، ویژگیهای flex-grow, flex-shrink و flex-basis (مقادیر باید به ترتیب دقیق باشد) توصیف می کند.

تنظیمات پیش فرض منعطف است: flex: 0 1 auto.

• 0 به این معنی است که در صورت وجود فضای اضافی ، مورد برای پر کردن ظرف گسترش نمی یابد.
• 1 مشخص می کند که وقتی فضا کوچکتر شود به همان نسبت سایر موارد کوچک می شود.
• در آخر ، خودکار بدان معنی است که طول اولیه مورد همان کد منبع است.

مثال زیر را تجزیه و تحلیل کنید تا ببینید چقدر آسان است از flex استفاده کنید:

<div class="flex-container">
	<div class="flex-item">1</div>
	<div class="flex-item">2</div>
	<div class="flex-item" style="flex: 1 0 50px">3</div>
	<div class="flex-item">4</div>
	<div class="flex-item">5</div>
</div>

Align-self

ویژگی align-self مقادیر align را با مقادیر جدید برای مورد موجود در کانتینر جایگزین می کند. ویژگی موارد را در محور عرضی تراز می کند.

این می تواند همان مقادیر ترازها را داشته باشد: align-items: flex-start, flex-end, center, baseline, stretch.

برای دیدن align-self در عمل ، به مثالهای flexbox زیر مراجعه کنید. مورد اول دارای موارد تراز نیست (به طور پیش فرض کشیده است). با این حال ، موارد شماره 2 و # 4 دارای align-self: center هستند.

<div class="flex-container">
	<div class="flex-item">1</div>
	<div class="flex-item" style="align-self: center">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item" style="align-self: center">4</div>
	<div class="flex-item">5</div>
</div>

مثال دوم پنج مورد فلکس را نشان می دهد که باید برای پر شدن ارتفاع ظرف فلکس کشش داشته باشد. با این حال ، مورد شماره 2 دارای ویژگی align-self: flex-start و مورد شماره 4 دارای ویژگی align-self: flex-end است.

<div class="flex-container">
	<div class="flex-item">1</div>
	<div class="flex-item" style="align-self: flex-start">2</div>
	<div class="flex-item">3</div>
	<div class="flex-item" style="align-self: flex-end">4</div>
	<div class="flex-item">5</div>
</div>

نکات مهم فلکس باکس CSS :

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

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.