۲۴ دیدگاه نظر نازنین کریمی مقدم
آموزش FlexBox : کامل و رایگان
آموزش FlexBox : کامل و رایگان

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

Flex Container

همان‌طور که در طراحی صفحه با CSS Grid، المان‌ها در یک Grid مادر با نام Container قرار می‌گیرند، در FlexBox نیز یک المان نگهدارنده با عنوان flex-container داریم:

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}
.flex-container > div {
  background-color: #f1f1f1;
  margin: 50px;
  padding: 50px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

در این شکل نگهدارنده یا Container مشخص شده است:

آموزش فلکس باکس

خواص نگهدارنده (Flex Container)

در FlexBox، مجموعه‌ای از ویژگی‌ها به‌گونه‌ای تعریف شده‌اند که تنها به نگهدارنده نسبت داده می‌شوند. این خواص عبارتند از:

  • display

  • flex Direction

  • flex wrap

  • flex flow

  • justify content

  • align content

  • align items

در ادامه‌ی مقاله‌ی آموزش FlexBox هر کدام از این ویژگی‌ها را توضیح می‌دهیم.

Display

در این قسمت آموزش FlexBox به توضیح ویژگی Display در فلکس باکس می‌پردازیم.

همان‌طور که در شکل زیر می‌بینید، به‌صورت پیش فرض همه div‌ها display: block هستند و به همین دلیل هر div، کل عرض صفحه را گرفته و موجب می‌شود که div‌های بعدی به پایین رفته و در کنار یکدیگر قرار نگیرند:

آموزش FlexBox

برای شروع کار با Flexbox، باید نگهدارنده‌ی مورد نظر خود را به‌صورت Flexbox درآوریم. برای تعریف یک نگهدارنده از نوع FlexBox باید مقدار display را معلوم کنیم که از نوع flex یا inline-flex باشد:

.flex-container {
  display: flex | inline-flex;
}

آموزش فلکس باکس

در این حالت المان‌ها دیگر تمامی عرض صفحه را اشغال نکرده و در کنار یکدیگر به‌صورت inline قرار می‌گیرند. شاید این تغییر ساده به‌نظر برسد اما در حقیقت ما در پشت صحنه چیزی قدرتمند را فعال کرده‌ایم.

Flex Direction

در این قسمت آموزش FlexBox به توضیح ویژگی Flex Direction در فلکس باکس می‌پردازیم.

نگهدارنده یا Container در FlexBox دارای دو محور است:

  • main axis : محور اصلی

  • cross axis : محور متقاطع

این محورها به‌صورت پیش‌فرض در اولین تصویر این مقاله و در بخش نگهدارنده مشخص شده‌اند.

در شکل بخش قبل، دیدیم که هنگامی که display را برابر با flex قرار می‌دهیم، همه div‌ها افقی و از سمت چپ به راست کنار همدیگر قرار گرفتند. این نحوه‌ی قرارگیری به این علت است که به‌صورت پیش‌فرض آیتم‌ها در طول محور اصلی یا Main axis از سمت چپ به راست قرار می‌گیرند و تزاربندی می‌شوند.

با استفاده از ویژگی Flex-direction می‌توان محور main axis و حالت پیش‌فرض را تغییر داد. در حالت پیش‌فرض، مقدار این ویژگی row هست اما با تغییر مقدار این ویژگی به column داریم:

آموزش FlexBox

همان‌طور که در شکل مشخص شده، هنگامی که این ویژگی را به column تغییر می‌دهیم، div‌ها عمودی و از بالا به پایین قرار می‌گیرند. نکته‌ای که در اینجا باید به آن توجه داشت این است که با قرار دادن مقدار column برای این ویژگی، المان‌ها در جهت cross axis قرار نمی‌گیرند؛ این مقدار، باعث شده تا جای محورهای main و cross عوض شده و به همین دلیل است که المان‌ها عمودی می‌شوند. مقادیر دیگری نیز برای ویژگی flex-direction وجود دارد؛ از جمله:

  • row-reverse : باعث شده تا المان‌ها از راست به چپ قرار بگیرند.

  • column-reverse : باعث شده تا المان‌ها از پایین به بالا قرار بگیرند.

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

در تصویر زیر تفاوت بین column و column-reverse قابل مشاهده است:

آموزش فلکس باکس

Flex wrap

در این قسمت آموزش FlexBox به توضیح ویژگی Flex wrap در فلکس باکس می‌پردازیم. همان‌طور که در بخش‌های قبل دیدیم، به‌صورت پیشفرض تمامی المان‌ها در یک خط قرار می‌گیرند. با استفاده از خاصیت flex-wrap می‌توان تعیین کرد که هرکدام از المان‌ها در چند خط قرار بگیرند که به هر یک از این خط‌ها flex line می‌گویند.

  • nowrap: (پیش‌فرض) آیتم‌ها در یک خط و در کنار هم قرار می‌گیرند.

  • wrap: آیتم‌ها در چند خط قرار می‌گیرند. در صفحات rtl از راست به چپ و در صفحات ltr از چپ به راست قرار می‌گیرند.

  • wrap-reverse: این مقدار معکوس مقدار wrap است.

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

آموزش FlexBox

Flex flow

در این قسمت آموزش FlexBox به توضیح ویژگی Flex flow در فلکس باکس می‌پردازیم. می‌توان دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کرد. مقدار پی‌شفرض آن row nowrap است.

.flex-container {
  display: flex;
  flex-flow: row wrap; /* flex-direction || flex-wrap */
}

Justify content

در این قسمت آموزش FlexBox به توضیح ویژگی Justify content در فلکس باکس می‌پردازیم. با استفاده از این ویژگی می‌توان نحوه‌ی ترازبندی المان‌ها بر روی محور اصلی یا Main axis را کنترل کرد. در اینجا تفاوت‌های میان Main و Cross axis واضح‌تر است. این ویژگی 5 مقدار اصلی را قبول می‌کند:

  • Flex-start : مقدار پیش‌فرض هست و باعث شده تا المان‌ها در ابتدای محور اصلی قرار بگیرند. اگر مقدار flex-direction برابر با row باشد، پس از قرار دادن مقدار flex-start برای ویژگی justify-content، تمامی div‌ها در سمت چپ ترازبندی می‌شوند.

  • Flex-end : تمامی المان‌ها در سمت راست ترازبندی می‌شوند.

  • Center : المان‌ها در وسط قرار می‌گیرند.

  • Space-between : میان تمامی المان‌ها فضای یکسان قرار داده می‌شود. توجه داشته باشید که در ابتدا و انتها، فضایی قرار نمی‌گیرد.

  • Space-around : تقاوت این مورد با مورد قبل در این هست که به ابتدا و انتها هم فضا اضافه خواهد شد.

.flex-container {
  display: flex;
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

آموزش فلکس باکس

Align content

در این قسمت آموزش FlexBox به توضیح ویژگی Align content در فلکس باکس می‌پردازیم.

این خاصیت هنگامی که flex container دارای فضای بیشتر از flex line هاست، می‌تواند نحوه‌ی چینش آن‌ها را تعیین کند. مقادیر خاصیت align-content برابر مقادیر خاصیت justify-content می‌باشد و تنها یک مقدار بیشتر از justify-align دارد. این مقادیر عبارتند از:

  • flex-start: با این مقدار flex line‌ها در ابتدای flex container جمع می‌شوند.

  • flex-end: با این مقدار flex line‌ها در انتهای flex container جمع می‌شوند.

  • center: با این مقدار flex line‌ها در وسط flex container جمع می‌شوند.

  • space-between: فضای خالی به طور مساوی بین flex line‌ها توزیع می‌شود. خط اولی در ابتدا و خط آخری در انتهای flex container قرار می‌گیرد.

  • space-around: فضای خالی به طور مساوی بین flex line‌ها تقسیم می‌شود.

  • stretch: (پیش‌فرض) flex line‌ها کشیده می‌شوند و فضای خالی را پر می‌کنند.

.container {
  display: flex;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

آموزش FlexBox

Align items

در این قسمت آموزش FlexBox به توضیح ویژگی Align items در فلکس باکس می‌پردازیم. اگر ویژگی justify-content را به خوبی متوجه شده باشید، با این ویژگی هم مشکلی نخواهید داشت. این خاصیت بسیار شبیه به justify-content است. justify-content، المان‌ها را بر اساس محور اصلی یا Main axis و ویژگی align-items، المان‌ها را بر اساس Cross axis ترازبندی می‌کند. مقادیری که align-items عبارتند از:

  •  flex-start: آیتم‌ها در نقطه شروع عرضی(cross start) قرار می‌گیرند.

  • flex-end: آیتم‌ها در نقطه اتمام عرضی (cross end) قرار می‌گیرند.

  • center: آیتم‌ها در وسط flex line قرار می‌گیرند.

  • baseline: آیتم‌ها با توجه به خط‌هایشان هم‌تراز می‌شوند.

  • stretch: (پیش‌فرض) در صورتی که ارتفاع(height) آیتم‌ها مشخص نشده باشد، آیتم‌ها کشیده می‌شوند و flex line را پر می‌کنند.

.flex-container {
  display: flex;
  align-items: flex-start | flex-end | center | baseline | stretch;
}

آموزش فلکس باکس

برای مثال، اگر بخواهیم المانی را در راستای عمودی وسط چین کنیم، داریم:

html, body {
  height: 100%;
  margin: 0;
}
body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

در این کد با استفاده از ویژگی‌ها و خصوصیات Flexbox کاری کردیم که محتویات درون body به‌صورت وسط چین قرار داده شوند. برای این‌کار در ابتدا display را برابر با flex و ترازبندی‌ها را هم برابر با center یا مرکز قرار داده و Vendor Prefix‌ها را برای پشتیبانی بیشتر گذاشتیم.

نکته مربوط به مقدار Stretch

اگر بخواهیم مقدار Stretch عمل کرده و المان مورد نظر تمامی فضای Cross axis را اشغال کند، دو راه داریم:

  • از ویژگی height برای المان‌های مورد نظر استفاده نکنیم.

  • در صورت استفاده از height، مقدارش را برابر با auto قرار بدهیم. توجه داشته باشید که اگر ویژگی height را برای المان مورد نظر تعریف کنیم، مقدار stretch را بازنویسی (override) خواهد کرد و در این صورت المان تمامی فضا را اشغال نمی‌کند.

نکته مربوط به مقدار baseline

زمانی که مقدار ویژگی را برابر با baseline قرار می‌دهیم، المان‌ها طوری تنظیم می‌شوند که پایین پاراگراف درون div ها، در یک خط قرار گرفته و تراز شود. اگر درون div‌ها پاراگرافی وجود نداشته باشد، div‌ها نسبت به موقعیت پایین خودشان تراز خواهند شد. مانند شکل زیر:

آموزش FlexBox

Flex Item

در این قسمت آموزش FlexBox به توضیح ویژگی Flex Item در فلکس باکس می‌پردازیم.

به المان‌هایی که درون نگهدارنده و به‌عنوان فرزند قرار می‌گیرند Flex Item گفته می‌شود. برای Flex شدن فرزندان کافی است مانند کد زیر در تگ HTML آنها را درون یک div نگهدارنده قرار دهیم و نیازی به تعریف کلاس خاصی در استایل نیست:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

البته توجه داشته باشید که آیتم‌ها هم مانند نگهدارنده، دارای ویژگی‌های مخصوص به خود هستند که در بخش‌های بعدی مقاله‌ی آموزش FlexBox آن‌ها را مرور خواهیم کرد.

خواص فرزندان (Flex Items)

همان‌طور که گفتیم در FlexBox، مجموعه‌ای از ویژگی‌ها به‌گونه‌ای تعریف شده‌اند که تنها به فرزندان نسبت داده می‌شوند. این خواص عبارتند از:

  • order

  • flex grow

  • flex shrink

  • flex basis

  • flex

  • align self

در ادامه هر کدام از این ویژگی‌ها را توضیح می‌دهیم.

Order

در این قسمت آموزش FlexBox به توضیح ویژگی Order در فلکس باکس می‌پردازیم. این مقدار می‌تواند مکان قرارگیری آیتم در کنار دیگر آیتم‌ها را مشخص کند. مقدار پیش‌فرض 0 است. اگر تنها مقدار order یکی از آیتم‌ها تعیین شود، آن آیتم بعد از تمامی آیتم‌ها قرار می‌گیرد؛ ولی اگر این خاصیت برای همه‌ی آیتم‌ها تعریف شود، می‌توان جایگاه قرارگیری آیتم‌ها را مشخص کرد. این خاصیت یکی از کاربردی‌ترین خاصیت‌ها هنگام طراحی واکنش‌گرا (responsive) هست. برای مقداردهی order می‌توان برای هر آیتم در استایل کلاس جداگانه تعریف کرد یا به صورت مستقیم در HTML آن را همانند زیر مشخص نمود:

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

آموزش فلکس باکس

Flex grow

در این قسمت آموزش FlexBox به توضیح ویژگی Flex grow در فلکس باکس می‌پردازیم. این خاصیت توانایی بزرگ شدن یک آیتم را تعیین می‌کند. flex-grow یک مقدار عددی بدون واحد می‌پذیرد. مقدار پیش‌فرض آن 0 است؛ یعنی آیتم‌ها توانایی بزرگ شدن را ندارند. در صورتی که flex container یا نگهدارنده فضای خالی داشته باشد و به یک آیتم flex-grow: 1 بدهید، آن آیتم تا جایی بزرگ می‌شود که فضای خالی درون نگهدارنده از بین برود.

دقت داشته باشید که هنگامی که خاصیت flex-direction نگهدارنده برابر با row باشد، flex-grow بر عرض (width) آیتم اعمال شده و اگر مقدار آن خاصیت برابر column باشد، flex-grow بر ارتفاع (height) اعمال می‌شود.

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

اگر به همه ی فلکس آیتم‌ها flex-grow: 1; بدهید، همه‌ی آنها به یک اندازه بزرگ می‌شوند. اگر در همین حالت مقدار flex-grow یکی از آیتم هارا 2 قرار دهید، آن آیتم 2 برابر دیگر آیتم خواهد شد.

آموزش FlexBox

Flex shrink

در این قسمت آموزش FlexBox به توضیح ویژگی Flex shrink در فلکس باکس می‌پردازیم. این خاصیت توانایی کوچک شدن یک آیتم را در صورت لزوم تعیین می‌کند. مقدار پیش‌فرض آن 1 است، یعنی آیتم‌ها می‌توانند کوچک شوند. اگر خاصیت flex-wrap نگهدارنده برابر nowrap باشد، آیتم‌ها تا زمانی که عرضشان به 0 برسد کوچک می‌شوند:

آموزش فلکس باکس

حال اگر در این صورت مقدار flex-shrink یکی از آیتم‌ها را برابر 2 قرار دهیم، آن آیتم 2 برابر دیگر آیتم‌ها کوچک می‌شود.

آموزش FlexBox نمونه‌ی کد:

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

Flex basis

در این قسمت آموزش FlexBox به توضیح ویژگی Flex basis در فلکس باکس می‌پردازیم. این خاصیت مقدار پایه‌ی عرض یا ارتفاع آیتم را تعیین می‌کند. یعنی عرض یا ارتفاع (به ستونی یا ردیفی بودن آیتم‌ها بستگی دارد) از این مقدار پایه نمی‌تواند کمتر شود. این خاصیت مانند min-height و min-width عمل می‌کند. مقدار پیش‌فرض این خاصیت auto می‌باشد، یعنی فلکس آیتم‌ها می‌توانند تا جایی کوچک شوند که عرض یا ارتفاع آنها به صفر برسد.

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

آموزش فلکس باکس

Flex

در این قسمت آموزش FlexBox به توضیح ویژگی Flex در فلکس باکس می‌پردازیم. این خاصیت در واقع یک امکان برای مختصر نویسی برای خاصیت‌های flex-grow ، flex-shrink و flex-basis می‌باشد. در کد زیر مقادیر flex به ترتیب در کامنت مشخص شده است. مقادیر دوم و سوم (flex-shrink و flex-basis) اختیاری هستند.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div> /* flex: flex-grow flex-shrink flex-basis */
  <div>4</div>
</div

آموزش FlexBox

Align self

در این قسمت آموزش FlexBox به توضیح ویژگی Align self در فلکس باکس می‌پردازیم. به‌عنوان آخرین خاصیت باقی‌مانده از مبحث FlexBox، ویژگی align-self را معرفی می‌کنیم. این ویژگی موقعیت و ترازبندی یک المان را به‌صورت جداگانه مشخص کرده و ویژگی align-items را برای المان مورد نظر، بازنویسی می‌کند. مقادیر مورد استفاده برای این ویژگی مشابه با ویژگی align-items است. مقدار پیش فرض auto می‌باشد که در این حالت موقعیت از ویژگی align-items تبعیت می‌کند. برای نمونه با اعمال این کد، فقط مربع اول در وسط قرار گرفته و بقیه‌ی موارد در ابتدا قرار می‌گیرند:

#container {
  align-items: flex-start;
}
.square#one {
  align-self: center;
}

حال فرض کنید که 4 مربع دارید و برای 2 مورد از ویژگی align-self استفاده کرده و برای سایر موارد ویژگی‌های align-items: center و flex-direction: row را تنظیم می‌کنیم. با این کار دو المان سمت راست ثابت در مرکز قرار می‌گیرند و دو مورد سمت چپ با استفاده از ویژگی align-self تغییر موقعیت می‌دهند. در نتیجه خروجی به‌صورت زیر خواهد شد:

آموزش فلکس باکس

صفحه‌ی واکنش‌گرا با FlexBox

بعد از آموزش FlexBox ، در این بخش می‌خواهیم یک صفحه ی واکنش‌گرا ساده با فلکس باکس طراحی کنیم.

کد HTML:

<div class="container">
	<div class="item item1 header">header</div>
	<div class="item item2 aside aside1">aside1</div>
	<div class="item item3 main">main</div>
	<div class="item item4 aside aside2">aside2</div>
	<div class="item item5 footer">footer</div>
</div>

کد CSS:

.container {
  margin: 10px;
  padding: 10px;
  min-height: 150px;
  background-color: #a13647;
  /* Flexbox */
  display: flex;
  flex-flow: row wrap;
}
.container .item {
  background-color: #d84a43;
  color: #fff;
  margin: 10px;
  padding: 10px;
  min-height: 50px;
}
.item {
  flex: 1; /*flex-grow: 1;*/
}
.item.header {
  flex: 100%; /*flex-basis: 100%;*/
}
.item.aside {
  flex: 0 200px; /*flex-grow: 0; flex-basis: 200px;*/
  height: 150px;
}
.item.main {
  flex: 1 auto; /*flex-grow: 1; flex-basis: auto ;*/
}
.item.footer {
  flex: 100%;
}
@media screen and (max-width: 950px) {
  .item.header {
    order: 1;
  }
  .item.aside {
    flex: 1 auto;
  }
  .item.aside.aside1 {
    order: 3;
  }
  .item.aside.aside2 {
    order: 4;
  }
  .item.main {
    order: 2;
    flex: 1 100%;
  }
  .item.footer {
    order: 5;
  }
}
@media screen and (max-width: 600px) {
  .item.aside {
    flex: 100%; /* flex-basis: 100%; as min-width: 100%;*/
  }
}

آموزش FlexBox

حذف Margin با FlexBox

اگر با CSS کار کرده باشید، حتما جاهای زیادی به این مشکل برخوردید که بخواهید تا تعدادی المان را در کنار هم قرار داده و با استفاده از margin فاصله‌ی بین آنها را تنظیم کنید. این مورد اغلب در کنار هم قراردادن اعضای یک منو رخ می‌دهد. مشکل به این صورت است که برای اضافه کردن فاصله‌ی بین آیتم‌ها، یک ویژگی همانند margin-right را تنظیم کرده ولی یک فاصله‌ی اضافه در سمت راست آخرین المان منو ایجاد شده و مورد مشکل ساز همین فاصله‌ی اضافه است. برای مثال کد زیر را در نظر بگیرید:

<!DOCTYPE html>
<html>
<head>
	<title>List</title>
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.clear:before,
		.clear:after {
		    content: " ";
		    display: table;
		}
		.clear:after {
		    clear: both;
		}
		.list {
			width: 800px;
			list-style: none;
			margin: 100px auto 0;
			background-color: yellow;
		}
		.person {
			width: 23%;
			margin-right: 2.66%;
			float: left;
			background-color: red;
			padding: 10px;
		}
	</style>
</head>
<body>
	<ul class="list clear">
		<li class="person">Item 1</li>
		<li class="person">Item 2</li>
		<li class="person">Item 3</li>
		<li class="person">Item 4</li>
	</ul>
</body>
</html>

می‌بینید که یک منو با 4 li قرار دادیم و درون style هم عرض هر کدام را 23 درصد تنظیم کرده و با استفاده از margin-right فاصله‌ی بین آنها را مشخص کردیم. خروجی کنونی شکل بالایی به‌صورت زیر خواهد بود:

آموزش فلکس باکس

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

<!DOCTYPE html>
<html>
<head>
	<title>List</title>
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.clear:before,
		.clear:after {
		    content: " ";
		    display: table;
		}
		.clear:after {
		    clear: both;
		}
		.list {
			width: 800px;
			list-style: none;
			margin: 100px auto 0;
			background-color: yellow;
		}
		.person {
			width: 23%;
			margin-right: 2.66%;
			float: left;
			background-color: red;
			padding: 10px;
		}
		.person:last-child {
			margin-right: 0;
		}
	</style>
</head>
<body>
	<ul class="list clear">
		<li class="person">Item 1</li>
		<li class="person">Item 2</li>
		<li class="person">Item 3</li>
		<li class="person">Item 4</li>
	</ul>
</body>
</html

می‌بینید که یک کلاس کاذب last-child گذاشته و مقدار margin-right را برای آن 0 قرار دادیم. در نتیجه فاصله‌ی اضافه از بین رفته و همه‌ی آیتم‌ها درون منو قرار گرفتند. همچنین یک راه ساده‌تر برای حذف کلاس‌های کاذب مثل nth- و first- و last-child وجود دارد و آن استفاده از FlexBox هست. می‌توان با قرار دادن مقدار space-between برای ویژگی justify-content، به راحتی بین المان‌ها فاصله قرار داده و به‌صورت زیر عمل کرد:

<!DOCTYPE html>
<html>
<head>
	<title>List</title>
	<style type="text/css">
		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}
		.list {
			display: flex;
			justify-content: space-between;
			width: 800px;
			list-style: none;
			margin: 100px auto 0;
			background-color: yellow;
		}
		.person {
			flex-basis: 23%;
			background-color: red;
			padding: 10px;
		}
	</style>
</head>
<body>
	<ul class="list clear">
		<li class="person">Item 1</li>
		<li class="person">Item 2</li>
		<li class="person">Item 3</li>
		<li class="person">Item 4</li>
	</ul>
</body>
</html>

در این کد برای کلاس list استایل display برابر با flex قرار دادیم و برای کلاس person هم ویژگی flex-basis را برابر با 23% گذاشتیم.

معرفی چند منبع خوب تکمیلی:

 کدهای سازنده‌ی این بخش تعاملی به‌دلیل حجم زیاد بارگذاری شده‌اند و می‌توانید از این‌جا آن‌ها را دانلود کنید.

در پایان چند منبع آنلاین برای تکمیل آموزش فلکس باکس معرفی می‌کنیم:

  • ابزار: یک ابزار آنلاین با استفاده از آن می‌توان قالب و چارچوب مورد نظر خود را بر اساس flexbox به وجود آورد و کدهای CSS را در خروجی تحویل گرفت.

  •  فریم ورک بولما: یک فریم ورک قوی و بروز برای CSS بر پایه‌ی FlexBox برای ساخت طرح‌های واکنش‌گرا و گریدبندی پیشرفته.

  • سایت: یک سایت برای طراحی و ساخت طرح‌های واکنش‌گرا و ساختارهای پیچیده.

  • سایت اول و سایت دوم: دو سایت انگلیسی با آموزش کامل و تصویری مطالب بیان ‌شده.

  • سایت بازیگونه: یک سایت بسیار جذاب برای آموزش موارد گفته ‌شده همراه با بازی.

جمع بندی:

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

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

۲۴ دیدگاه
ما همه سوالات و دیدگاه‌ها رو می‌خونیم و پاسخ میدیم
۲۲ شهریور ۱۴۰۲، ۰۷:۴۶

واقعا سایت سون لرن در حوزه برنامه نویسی جز بهترین سایت هایی اموزشی تو کل نت هستش که صورت ساده و اسان اموزش میده - تشکر از سایت خیلی خوبتون

نازنین کریمی مقدم ۲۲ شهریور ۱۴۰۲، ۰۹:۴۸

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

۰۷ شهریور ۱۴۰۲، ۱۱:۵۵

سلام دفعه اول عکس‌ها به صورت انیمیشن جابه جا میشد بعد که دوباره وارد سایت شدم ثابت موند چرا

نازنین کریمی مقدم ۰۸ شهریور ۱۴۰۲، ۰۵:۲۷

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

۰۷ تیر ۱۴۰۲، ۱۷:۰۹

سلام ، ببخشید من وقتی از flex-grow روی چند عنصر استفاده می‌کنم و در اون متن می‌نویسم، عرض اون عنصر به اندازه متنی که می‌نویسم بزرگ‌تر می‌شه و همه چیز به هم می‌ریزه و flex-grow عمل نمیکنه!

نازنین کریمی مقدم ۰۹ تیر ۱۴۰۲، ۲۱:۱۹

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

۱۵ آذر ۱۴۰۰، ۰۸:۱۴

سلام ممنون از اموزش خوبتون یه سوال داشتم اگر ما المان هامون چند ردیف بود و باید از align-content استفاده کنیم ولی ارتفاع آنها متغیر است و مثل مثال‌های بالا ثابت نیست ولی میخواهیم المان ردیف پایین به فاصله یکسانی از المان ردیف بالایی خودش قرار بگیره چیکار باید کنیم؟ مثل سایت پینترست که هر عکس ارتفاع خودشو داره و عکس ردیف پایینی به فاصله مشخص از عکس ردیف بالایی خودش قرار گرفته نه اینکه با بلندترین ارتفاع المان ردیف بالایی خودش تراز شه

Nazanin KarimiMoghaddam ۱۵ آذر ۱۴۰۰، ۰۹:۳۲

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

dorsa ۱۸ مهر ۱۴۰۰، ۱۸:۲۳

سلام ، اول یه تشکر میکنم از اموزش خوبتون ؛ دوم اینکه یه سوال دیسپلی :فلکس با فلکس دایرکشن: رُ چه فرقی داره جفتشون که یکیه

مارسل ۱۶ مرداد ۱۴۰۰، ۱۱:۰۸

سالها بود که یه سایت فارسی خوب برای اموزش طراحی سایت نداشتیم ممنون از زحماتتون اینشالا کاربر‌ها حمایت مالی کنن که این راهو شما ادامه بدید

نازنین کریمی مقدم ۱۷ مرداد ۱۴۰۰، ۱۲:۱۵

ممنون که با ما همراه هستید :) انشالله با حمایتهای شما کاربران عزیز همچنان این مسیر رو ادامه میدیم.

programer ۱۳ خرداد ۱۴۰۰، ۰۸:۵۳

یک سایت عالی با کلی مطلب‌های عالی

sobhan ۰۳ خرداد ۱۴۰۰، ۰۷:۰۰

عالی بود مخصوصا سایت‌های معرفی شده

reza ۲۹ دی ۱۳۹۹، ۲۱:۳۷

کاش قیمت‌ها بایین‌تر بود

Karbar ۱۶ دی ۱۳۹۹، ۰۹:۲۰

سلام.کاش یه توضیحی راجع به کلاس هایی که واسه اون مثال صفحه واکنشگرا میدادین.بعضی کلاسا item1 یا item2 اسمشونه که توی کدهای بخش استایل همچین کلاسایی نداریم.و چرا انقدر کلاس item تکرار شده؟ بازم ممنون

نازنین کریمی مقدم ۱۶ دی ۱۳۹۹، ۱۰:۱۸

سلام. حقیقتا کلاسای item1 و... رو برای این نوشتم که اگر کسی میخواست شخصی سازی بیشتری انجام بده، خودش کلاسشو تو استایل تکمیل کنه. چون معمولا در ابتدای کار خیلیا میان و کدهاشون رو تو کلاس ما مینویسن، بعد کدشون اجرا نمیشه و اشتباها کدهای قبلی رو دست میزنند یا فکر میکنند که مشکل از کد ماست. اما شما میتونید ازشون استفاده نکنید. علاوه بر اون، اضافه کردن یه دلیل دیگه غیر آموزشی هم داشت. یکی از سایتها به صورت غیرقانونی در حال کپی مطالب ما بود که با اینکار براشون تله گذاشتیم :)) کلاس item استایل عمومی همه المانهاست که باید بر هر کدومشون جدا اعمال بشه و برای همین به تک تک شون در بخش html اضافه شده. همچنین همونطور ک گفتم هر کدوم از این المانها ویژگیهای غیرمشترک با هم دارند (مثل اندازه و..) که تو استایل مثلا با شیوه .item.header مقداردهی شدند. ممنون که با ما همراه هستید.

پوریا ۱۴ خرداد ۱۳۹۹، ۰۸:۴۲

خیلی خوب توضیح داده بودین,ممنون.

نازنین کریمی مقدم ۱۷ خرداد ۱۳۹۹، ۰۹:۴۹

سلام. ممنون که با ما همراه هستید.

حامد ۱۱ خرداد ۱۳۹۹، ۲۰:۲۸

خیلی مقاله خوبی بود واقعن مرسی. اما یه جاهایی از flex-grow و flex-basis همزمان استفاده کرده بودید که اصلن نیازی به استفاده از flex-grow نبود.

نازنین کریمی مقدم ۱۷ خرداد ۱۳۹۹، ۰۹:۵۳

سلام. حق با شماست. هدف ما از اینکار، تکرار در استفاده از ویژگیها برای یادگیری افرادی هست که ممکنه تازه شروع کرده باشند.

Zahra Salehi ۰۹ خرداد ۱۳۹۹، ۱۴:۰۱

سلام اون layout ی که قرار دادین که واکنش گرا نیست !! اسکرول میخوره

نازنین کریمی مقدم ۱۰ خرداد ۱۳۹۹، ۱۱:۵۱

سلام. اگر مراحل رو به درستی انجام داده باشید نباید دارای اسکرول افقی باشید. البته ممکن هست مشکل از مرورگرتان باشد که پیشنهاد میکنم بخش مرورگر در <a href="https://7learn.com/blog/what-is-flexbox">این مقاله</a> رو مطالعه کنید.

رامین ربیعی ۰۵ خرداد ۱۳۹۹، ۱۸:۱۱

خیلی عالی بود مرسی

نازنین کریمی مقدم ۰۶ خرداد ۱۳۹۹، ۱۹:۲۷

سلام. خوشحالیم که این مقاله براتون مفید بوده :)

  • Flex Container
  • خواص نگهدارنده (Flex Container)
  • Display
  • Flex Direction
  • Flex wrap
  • Flex flow
  • Justify content
  • Align content
  • Align items
  • Flex Item
  • خواص فرزندان (Flex Items)
  • Order
  • Flex grow
  • Flex shrink
  • Flex basis
  • Flex
  • Align self
  • صفحه‌ی واکنش‌گرا با FlexBox
  • حذف Margin با FlexBox
  • معرفی چند منبع خوب تکمیلی:
اشتراک گذاری مقاله در :