1. صفحه اصلی
  2. مقالات
  3. آموزش کامل کار با مدل Flexbox (قسمت اول)

آموزش کامل کار با مدل Flexbox (قسمت اول)

امیر زوارمی امیر زوارمی
10 تیر 1398
درسنامه درس 16 از سری CSS پیشرفته

Flexbox در CSS چیست؟

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

  • Block برای قسمت های مختلف یک صفحه
  • Inline برای متن ها
  • Table (جدول) برای داده های دو بعدی جدول ها
  • Positioned برای تعیین موقعیت صریح یک عنصر

اما خاصیت Flexible Box یا به اختصار Flexbox در css ، کار طراحی صفحات واکنش گرا (بدون استفاده از float و ...) را بسیار آسان کرده است. پشتیبانی از این خصوصیت در مرورگرهای مختلف به این شرح است:

کروم Edge فایرفاکس سافاری اپرا
29.0 11.0 22.0 10 48

عناصر Flexbox

برای استفاده از مدل Flexbox باید ابتدا یک نگهدارنده (container) ایجاد کنید. به این مثال توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

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

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که در مثال می بینید برای استفاده از Flexbox باید display را برای عنصر نگهدارنده روی flex تنظیم کنیم. بدین صورت عناصر داخل آن هر کدام یک آیتم flexbox محسوب می شوند.

قبلا هم گفتیم که عنصر نگهدارنده با تنظیم display به flex وارد حالت Flexbox می شود:

.flex-container {
  display: flex;
}

اما این تنها خصوصیت عنصر نگهدارنده (container) نیست. این عنصر دارای خصوصیات زیر نیز می باشد:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

قصد داریم تک تک این خصوصیات را بررسی کنیم.

خصوصیت flex-direction

خصوصیت flex-direction تعیین می کند که آیتم های درونش چطور کنار هم قرار بگیرند. برای روشن شدن موضوع چند مثال برای شما آورده ایم:

مثال اول - مقدار column آیتم ها را به صورت عمودی روی هم قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column;" stacks the flex items vertically (from top to bottom):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم- مقدار column-reverse آیتم ها را به صورت عمودی روی هم قرار می دهد اما به صورت برعکس (از آیتم آخر به اول):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: column-reverse;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: column-reverse;" stacks the flex items vertically (but from bottom to top):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال سوم - مقدار row آیتم ها را به صورت افقی کنار هم قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-direction Property</h1>

<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex-wrap

خصوصیت flex-wrap می گوید که آیا آیتم های Flexbox هنگام رسیدن به پایان عرض صفحه به خط بعدی منتقل شوند و یا اندازه شان کوچک تر شود تا همگی در یک خط و کنار هم قرار بگیرند. برای درک بهتر این خصوصیت چند مثال برایتان آورده ایم. سعی کنید در هر خروجی، اندازه ی مرورگر را کوچک تر و بزرگ تر کنید (خط وسط صفحه در JSBin) تا رفتار آیتم ها را ببینید.

مثال اول - مقدار wrap آیتم ها را wrap می کند (با رسیدن به عرض صفحه، به خط بعد منتقل می شوند):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap;" specifies that the flex items will wrap if necessary:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم - مقدار nowrap آیتم ها را wrap نمی کند (آیتم ها کوچک می شوند تا در یک خط جا شوند):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: nowrap;" specifies that the flex items will not wrap (this is default):</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

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

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-wrap Property</h1>

<p>The "flex-wrap: wrap-reverse;" specifies that the flex items will wrap if necessary, in reverse order:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت flex-flow

این خصوصیت یک دستور خلاصه برای خصوصیت های flex-direction و flex-wrap می باشد. به مثال های زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-flow: row wrap;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The flex-flow Property</h1>

<p>The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>  
  <div>10</div>
  <div>11</div>
  <div>12</div>  
</div>

<p>Try resizing the browser window.</p>

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت justify-content

خصوصیت justify-content برای ترازبندی آیتم های Flexbox استفاده می شود و مقادیر مختلفی می گیرد. من برای هر کدام از مقادیر دریافتی این خصوصیت یک مثال آورده ام:

مثال اول - مقدار center که آیتم ها را در وسط صفحه قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: center;" aligns the flex items at the center of the container:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم - مقدار flex-start که مقدار پیش فرض است و آیتم ها را در ابتدای نگهدارنده قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-start;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: flex-start;" aligns the flex items at the beginning of the container (this is default):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال سوم - مقدار flex-end که آیتم ها را در انتهای نگهدارنده قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: flex-end;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: flex-end;" aligns the flex items at the end of the container:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال چهارم - مقدار space-around که قبل، بعد و بین آیتم ها فضای خالی قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-around;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: space-around;" displays the flex items with space before, between, and after the lines:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال پنجم - مقدار space-between که تنها بین آیتم ها فضای خالی قرار می دهد (نه قبل و بعدشان):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The justify-content Property</h1>

<p>The "justify-content: space-between;" displays the flex items with space between the lines:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

خصوصیت align-items

خصوصیت align-items برای ترازبندی عمودی عناصر استفاده می شود. برای اینکه خاصیت align-items در مثال زیر بهتر مشخص شود به عنصر نگهدارنده ارتفاع 200 پیکسلی داده ایم و برای هر مقداری که align-items میگیرد یک مثال زده ایم.

مثال اول - مقدار center که آیتم ها را در وسط صفحه قرار می دهد (از نظر محور عمودی):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: center;" aligns the flex items in the middle of the container:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال دوم - مقدار flex-start که آیتم ها را در بالای نگهدارنده قرار می دهد (شروع در محور عمودی، بالا است):

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: flex-start;" aligns the flex items at the top of the container:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال سوم - مقدار flex-end که آیتم ها را در پایین نگهدارنده قرار می دهد:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: flex-end;" aligns the flex items at the bottom of the container:</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال چهارم - مقدار stretch که مقدار پیش فرض است و آیتم ها را آنقدر کِش می دهد تا تمام نگهدارنده را پُر کنند:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>

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

</body>
</html>

مشاهده ی خروجی در JSBin

مثال پنجم - مقدار baseline که آیتم ها را بر اساس baseline متنی شان ترازبندی می کند:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  align-items: baseline;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>The align-items Property</h1>

<p>The "align-items: baseline;" aligns the flex items such as their baselines aligns:</p>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>  
  <div><small>4</small></div>  
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

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

مفهوم Baseline متنی
مفهوم Baseline متنی

در این تصویر خط قرمز، baseline متنی را مشخص می کند؛ یعنی پایین ترین قسمت متنِ آیتم ها بدون توجه به شکل آیتم.

امیدوارم از این قسمت لذت برده باشید. در قسمت بعدی خصوصیات دیگر مدل Flexbox را بررسی خواهیم کرد.

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

حاشیه های پیشرفته تر در CSS

1

تصاویر پس زمینه ترکیبی در CSS

2

گرادینت (gradient) در زبان CSS

3

سایه ها (shadows) در زبان CSS

4

افکت های متنی و فونت ها در زبان CSS

5

تغییر شکل دو بعدی عناصر در CSS

6

تغییر شکل سه بعدی عناصر در CSS

7

Transition ها در زبان CSS

8

ساخت tooltip در زبان CSS

9

استایل دهی پیشرفته تصاویر در CSS

10

استایل دهی دکمه ها در CSS

11

صفحه بندی (Pagination) در CSS

12

نوشتارهای چند ستونه در CSS

13

خصوصیات object-fit و resize و outline-offset

14

متغیرهای CSS و مبحث Box Sizing

15

آموزش کامل کار با مدل Flexbox (قسمت اول)

16

آموزش کامل کار با مدل Flexbox (قسمت دوم)

17

کار با Media Query ها در CSS 3 به همراه چند مثال

18

طراحی واکنش گرا در CSS

19

Grid-View چیست؟

20

Media Query ها در طراحی واکنش گرا

21

تصاویر و ویدیوها در طراحی واکنش گرا

22

grid ها در زبان CSS

23

کار با container (نگهدارنده‌ی) grid

24

قسمت پایانی: آیتم های grid در CSS

25
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 9 ماه قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو