flexbox

قبل از معرفی flexbox چهار حالت وجود داشت:

block، برای بخش های موجود در یک صفحه وب

inline، برای متن

table، برای داده های جدول دو بعدی

positioned، برای حالت مشخص یک المان

flexbox layout module، طراحی ساختار حالت های انعطاف پذیر در css را بدون استفاده از float  یا positioning آسان تر کرده است.

المان های flexbox

یک طرح flexbox از یک المان والد (parent element) با یک یا تعداد بیشتری المان فرزند (child element) تشکیل شده است.

flexbox در تصویر بالا یک المان والد (container) را با رنگ آبی، همراه با سه آیتم نشان می دهد.

مثال:

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

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

المان والد (container)

هنگامی که مقدار display المان والد را برابر flex قرار دهیم، flexible و در واقع انعطاف پذیر می شود.
مثال

.flex-container {
  display: flex;
}

خصوصیات فلکس باکس برای المان والد:

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

flex-direction

مقادیر مجاز
• column
• column-reverse
• (row (default
• row-reverse
این خصوصیت مشخص می کند که آیتم های flexbox نسبت به والد در چه جهتی قرار بگیرند.

مثال:

از مقدار column برای قرار دادن آیتم ها در یک ستون، از بالا به پایین استفاده کنید.

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

مثال:
از مقدار column-reverse برای قرار دادن آیتم ها در یک ستون، از پایین به بالا استفاده کنید.

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

مثال:
از مقدار row برای قرار دادن آیتم ها از چپ به راست استفاده کنید.

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

مثال:
از مقدار row-reverse برای قرار دادن آیتم های flexbox از راست به چپ استفاده کنید.

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

flex-wrap:

مقادیر مجاز
• (nowrap (default
• wrap
• wrap-reverse
خصوصیت flex-wrap مشخص می کند که والد به چه صورت آیتم ها را در بر بگیرد.
مثال زیر ۱۲ آیتم دارد تا خصوصیت flex-wrap را بهتر نمایش دهد.

مثال:

از مقدار wrap برای نمایش آیتم ها در چندین ردیف استفاده کنید:

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

مثال:
از مقدار nowrap برای نمایش آیتم ها در یک ردیف استفاده کنید:

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

مثال:
از مقدار wrap-reverse برای نمایش آیتم ها در چند ردیف، از پایین به بالا استفاده کنید:

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

flex-flow

(flex-direction flex-wrap) که مقدار پیش فرض آن row nowrap می باشد.

خصوصیت flex-flow خصوصیت مختصر برای هر دو خصوصیت flex-direction و flex-wrap می باشد.

مثال:

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

justify-content

مقادیر مجاز:

• center
• (flex-start (default
• flex-end
• space-around
• space-between

خصوصیت justify-content چیدمان آیتم ها را در یک ردیف را تنظیم می کند.

مثال:
از مقدار center برای قرار دادن آیتم ها در وسط container استفاده کنید:

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

مثال:
از مقدار flex-start برای قرار دادن آیتم ها از ابتدای container استفاده کنید:

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

مثال:
از مقدار flex-end برای قرار دادن آیتم ها از انتهای contdiner استفاده کنید:

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

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

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

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

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

align-items

مقادیر مجاز:
• baseline
• center
• flex-start
• flex-end
• (stretch (default

خصوصیت align-items چیدمان آیتم ها در راستای عمودی را تنظیم می کند:
در مثال زیر به container ارتفاع ۲۰۰px داده شده تا خصوصیت align-item بهتر نمایش داده شود:

مثال:
از مقدار center برای وسط قرار دادن آیتم ها استفاده کنید:

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

مثال:
از مقدار flex-start برای قرار دادن آیتم ها در ابتدای container استفاده کنید:

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

مثال:
از مقدار flex-end برای قرار دادن آیتم ها در انتهای container استفاده کنید:

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

مثال:
از مقدار stretch برای کشیدن آیتم ها از ابتدا تا انتهای container استفاده کنید:

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

مثال:
از مقدار base-line برای قرار دادن آیتم ها در راستای خط مبنا استفاده کنید:

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

* نکته: در مثال زیر برای هر کدام از آیتم ها اندازه فونت متفاوتی داده شده است، تا مشخص شود که همگی بر اساس خط مبنای متن تنظیم شده اند:

align-content

مقادیر مجاز:
• center
• flex-start
• flex-end
• space-around
• space-between
• (stretch (default

خصوصیت align-content ردیف آیتم ها را تنظیم می کند:
در مثال زیر به container ارتفاع ۶۰۰px و خصوصیت flex-wrap:wrap داده شده است، تا خصوصیت align-content بهتر نمایش داده شود:

مثال:
از خصوصیت space-between برای نمایش ردیف هایی با فواصل مساوی در بین آیتم ها استفاده کنید:

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

مثال:
از خصوصیت space-around برای نمایش ردیف هایی با فواصل مساوی در اطراف آیتم ها استفاده کنید:

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

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

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

مثال:
از خصوصیت center برای نمایش ردیف ها در وسط container استفاده کنید:

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

مثال:
خصوصیت flex-start برای نمایش ردیف هایی که از ابتدای container قرار گرفته اند، استفاده می شود:

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

مثال:
خصوصیت flex-end برای نمایش ردیف هایی که در انتهای container قرار گرفته اند، استفاده می شود:

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

perfect centering

در مثال زیر ما مشکلی که افراد، بسیار با آن روبرو می شوند را برطرف می کنیم.
مقدار هر دو خصوصیت justify-content و align-item را برابر center قرار دهید، در اینصورت آیتم دقیقا در مرکز container قرار می گیرد:
مثال:

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

(Child Elements (Item

فرزندان مستقیم در flexible container، به طور خودکار آیتم هایی با خصوصیت flexible هستند.
مثال:

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

خصوصیات flexbox برای المان های فرزند:
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

مقادیر مجاز
Integer
defaul=0
خصوصیت order آیتم ها را بر اساس نظم خاصی مرتب می کند.
اولین آیتم در کد HTML، الزاما اولین آیتمی نیست که در چیدمان می آید.

مثال:
از خصوصیت order برای تغییر ترتیب آیتم های flexible استفاده کنید:

<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

مقادیر مجاز
number
default=0
خصوصیت flex-grow مشخص می کند که یک آیتم فلکس نسبت به سایر آیتم ها، چقدر رشد خواهد کرد:

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

<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>

flex-shrink

مقادیر مجاز
number
default=1
خصوصیت flex-shrink مشخص می کند که یک آیتم فلکس نسبت به سایر آیتم ها، چقدر کوچک خواهد شد:

مثال:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis

مقادیر مجاز:
تمامی مقادیر مجاز عرض یا محتوا
default=auto
خصوصیت flex-basis عرض آیتم فلکس را مشخص می کند:

مثال:
مثال زیر عرض آیتم سوم را مشخص کرده است:

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

flex

مقادیر مجاز
flex-grow flex-shrink flex-basis
default=0 1 auto
خصوصیت flex به ترتیب برای بیان میزان flex-shrink، flex-grow و flex-basis به کار می رود.

مثال:
در مثال زیر برای آیتم سوم مقادیر flex-grow و flex-shrink را برابر صفر و مقدار flex-basis را برابر ۲۰۰px در نظر گرفته ایم:

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

align-self

مقادیر مجاز
• auto) default)
• baseline
• center
• flex-start
• flex-end
• stretch
خصوصیت align-self ترازبندی که به طور پیش فرض container برای آیتم ها تعیین می کند را لغو می کند:

مثال:

ترازبندی آیتم سوم در وسط:

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

مثال:
ترازبندی آیتم دوم از ابتدا و آیتم سوم از انتهای container:

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