ویژگی flex-direction 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