Flexbox در CSS

قبل از ماژول Flexbox ، چهار حالت طرح بندی وجود داشت:

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

ماژول چیدمان جعبه Flexible ، ساختن طرح بندی ریسپانسیو انعطاف پذیر بدون استفاده از شناور(float) یا موقعیت(position) را آسان تر می کند.

عنصر Flexbox

برای شروع استفاده از مدل Flexbox، ابتدا باید یک ظرف انعطاف پذیر(container) را تعریف کنید.

مثال زیر یک container انعطاف پذیر (منطقه آبی) را با سه عدد انعطاف پذیر نشان می دهد.

عنصر Flexbox
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 
مشاهده مثال

عنصر والدین (container)

container انعطاف پذیر با تنظیم خصوصیت display  به انعطاف پذیری تبدیل می شود:

.flex-container {
display: flex;
}

خصوصیات container  انعطاف پذیر عبارتند از:

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

ویژگی flex-direction

ویژگی flex-direction تعریف می کند که در آن کانتینر قصد دارد انعطاف پذیری ها را مرتب کند.

مقدار ستون موارد انعطاف پذیر را به صورت عمودی (از بالا به پایین) مرتب می کند:

عنصر والد
.flex-container {
  display: flex;
  flex-direction: column;
}
مشاهده مثال

مقدار ستون معکوس موارد انعطاف پذیر را به صورت عمودی (اما از پایین به بالا) دسته بندی می کند:

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;
}
مشاهده مثال

ویژگی flex-wrap

خصوصیات flex-wrap مشخص می کند که آیتم های انعطاف پذیر باید بسته شوند یا نه.

مثالهای زیر 12 عدد انعطاف پذیر را در اختیار شما قرار میدهند تا بتوانید خصوصیات flex-wrap را نشان دهید.

row-reverse
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
مشاهده مثال

wrap
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
مشاهده مثال

nowrap
.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
مشاهده مثال

ویژگی flex-flow

ویژگی flex-flow جریان یک ویژگی مختصر برای تنظیم هر دو ویژگی flex-direction و flex-wrap است.

wrap-reverse
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
مشاهده مثال

ویژگی justify-content

برای محاسبه موارد انعطاف پذیر از justify-content استفاده می شود:

row wrap
.flex-container {
  display: flex;
  flex-flow: row wrap;
}
مشاهده مثال

ترازبندی center
.flex-container {
  display: flex;
  justify-content: center;
}
مشاهده مثال

flex-start
.flex-container {
  display: flex;
  justify-content: flex-start;
}
مشاهده مثال

flex-end
.flex-container {
  display: flex;
  justify-content: flex-end;
}
مشاهده مثال

space-around
.flex-container {
  display: flex;
  justify-content: space-around;
}
مشاهده مثال

ویژگی align-items

خصوصیت align-items برای جفت کردن اجزای انعطاف پذیر به صورت عمودی استفاده می شود.

در این نمونه ها ما از یک container  200 پیکسل بالا استفاده می کنیم تا ویژگی align-items  را نشان دهد.

space-between
.flex-container {
  display: flex;
  justify-content: space-between;
}
مشاهده مثال

align-items center
.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}
مشاهده مثال

flex-start
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-start;
}
مشاهده مثال

flex-end
.flex-container {
  display: flex;
  height: 200px;
  align-items: flex-end;
}
مشاهده مثال

stretch
.flex-container {
  display: flex;
  height: 200px;
  align-items: stretch;
}
مشاهده مثال

ویژگی align-content

ویژگی align-content برای تنظیم خطوط انعطاف پذیر استفاده می شود.

در این نمونه ها ما از container  با ظرفیت 600 پیکسل استفاده می کنیم که ویژگی بسته بندی پیچیده را برای بسته بندی به کار می برد تا ویژگی 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;
}
مشاهده مثال

align-content center
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}
مشاهده مثال

align-content flex-start
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-start;
}
مشاهده مثال

align-content flex-end
.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: flex-end;
}
مشاهده مثال

مرکزی کامل (perfect centering)

در مثال زیر ما یک مسئله بسیار رایج را حل می کنیم: perfect centering

راه حل: هر دو ویژگی های justify-content و align-items را به مرکز تنظیم کنید و مورد انعطاف پذیری کاملا محور قرار گیرد:

align-items center
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}
مشاهده مثال

عناصر فرزند (اقلام)

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

عنصر فوق چهار علامت آبی انعطاف پذیر را درون ظرف مخزن خاکستری ظاهر می کند.

flex-container
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div> 
مشاهده مثال

 

خصوصیات انعطاف پذیری (flex) عبارتند از:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

ویژگی order

خصوصیت order ، ترتیب موارد انعطاف پذیری را مشخص می کند.

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

مقدار order باید یک عدد باشد، مقدار پیش فرض 0 است.

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

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

مقدار باید یک عدد باشد، مقدار پیش فرض 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

خصوصیات flex-shrink را مشخص می کند که چقدر مقدار انعطاف پذیری نسبت به بقیه موارد انعطاف پذیر کاهش می یابد.

مقدار باید یک عدد باشد، مقدار پیش فرض 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

خصوصیات flex-basis ، طول اولیه یک محصول flex را مشخص می کند.

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-base است.

flex
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div> 
مشاهده مثال

ویژگی align-self

خصوصیات align-self تراز برای آیتم انتخاب شده داخل کانتینر را مشخص می کند.

خصوصیات  align-self همگام سازی پیشفرضی تنظیم شده توسط ویژگی  align-items را غیرفعال میکند.

در این نمونه ها از یک ظرف 200 پیکسل بالا استفاده می کنیم تا بهتر بتوانیم خصوصیات align-self را نشان دهیم:

align-self
 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div> 
مشاهده مثال

align-self flex-start
 <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> 
مشاهده مثال

پشتیبانی مرورگر

خواص flexbox در تمام مرورگرهای مدرن پشتیبانی می شود.

نظر شما

یادگیری CSS یادگیری CSS

مقدمه ای بر CSS ترکیب کدهای CSS CSS چگونه کار میکند؟ رنگ ها در CSS پس زمينه در CSS خط حاشيه ( border ) در CSS margin (حاشیه) در CSS صفت padding در CSS عرض و ارتفاع در CSS مدل جعبه ای CSS outline در CSS متن در CSS فونت ها در CSS آیکون ها در CSS لینک ها در CSS لیست ها در CSS جدول در CSS نمايش در قالب بندی CSS حداكثر عرض در CSS صفت position در CSS صفت overflow در CSS صفت float در CSS بلوک اینلاین در CSS تراز بندی در CSS combinator در CSS Pseudo-classes در CSS Pseudo-Elements در CSS تاری و شفافیت در CSS منو ناوبری در CSS کرکره ها در CSS ابزار راهنما (tooltip) در CSS گالری تصاویر در CSS اسپرایت تصویر در CSS سلکتور های صفات در CSS فرم ها در CSS شمارشگر ها در CSS معرفی CSS3 گوشه های گرد در CSS3 حاشیه های تصویری در CSS3 پس زمینه در CSS3 رنگ ها در CSS3 گرادیانت در CSS3 سایه در CSS3 متن در CSS3 فونت ها در CSS3 ترنسفرم های دوبعدی در CSS3 ترنسفرم های سه بعدی CSS3 انتقال در CSS انیمیشن در CSS Tooltip در CSS استایل تصویر در CSS ویژگی object-fit در CSS دکمه ها در CSS صفحه بندی در CSS چندستونی در CSS رابط کاربری CSS متغیرهای CSS اندازه جعبه (Box) در CSS Flexbox در CSS کوئری Media در CSS مثال کوئری Media در CSS طراحی ریسپانسیو وب – مقدمه طراحی ریسپانسیو وب – viewport طراحی ریسپانسیو وب – Grid-View طراحی ریسپانسیو وب – کوئری Media طراحی ریسپانسیو وب – تصاویر طراحی ریسپانسیو وب – ویدیو طراحی ریسپانسیو وب – چارچوب (Frameworks) چیدمان شبکه ای در CSS

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز