CSS فلیکس ڈائریکشن کی اپریشن

تعریف و استفاده

ویژگی flex-direction مسیر پروژه‌های ارتجاعی را مشخص می‌کند.

نوتیس:اگر عناصر غیر از پروژه‌های ارتجاعی هستند، ویژگی flex غیرممکن است.

لطفاً به اینجا مراجعه کنید:

آموزش CSS:مکعب انعطاف‌پذیر CSS

دستورالعمل CSS:ویژگی flex

دستورالعمل CSS:ویژگی flex-basis

دستورالعمل CSS:ویژگی flex-flow

دستورالعمل CSS:ویژگی flex-grow

دستورالعمل CSS:ویژگی flex-shrink

دستورالعمل CSS:ویژگی flex-wrap

دستورالعمل HTML DOM:ویژگی flexDirection

مثال

جهت تنظیم جهت عنصرهای انعطاف‌پذیر داخل <div> به ترتیب معکوس تنظیم شود:

div {
  display: flex;
  flex-direction: row-reverse; 
}

خودتان امتحان کنید

زبان CSS

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

مقدار ویژگی

مقدار توضیحات
row مقدار پیش‌فرض. به عنوان یک خط، افقی نمایش داده می‌شوند.
row-reverse راستای‌های مشابه، اما در جهت مخالف.
column به عنوان ستون، عمودی نمایش داده می‌شوند.
column-reverse ستون‌های مشابه، اما در جهت مخالف.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به اینجا مراجعه کنید: initial。
inherit این ویژگی را از عنصر والد خود ارث می‌برد. به اینجا مراجعه کنید: inherit。

جزئیات فنی

مقدار پیش‌فرض: row
وراثت: خیر
انیمیشن ساخت: پشتیبانی نمی‌شود. لطفاً به اینجا مراجعه کنید:ویژگی‌های مرتبط با انیمیشن。
نسخه: CSS3
زبان برنامه‌نویسی JavaScript: object.style.flexDirection="column-reverse"

مثال‌های بیشتر

استفاده از flex-direction و پرسش‌وپاسخ‌های رسانه‌ای برای ایجاد طرح‌های مختلف برای اندازه‌های صفحه/دستگاه‌های مختلف:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* طراحی پاسخگویی - ساخت یک ستون (100%) به جای دو ستون (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

خودتان امتحان کنید

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را کامل پشتیبانی می‌کنند.

اعداد شمار -webkit- یا -moz- نشان‌دهنده نسخه اولیه استفاده از پیشوند است.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0