عرض مصدر CSS/Topics/Flexbox

{| class="wikitable"
!الخاصية
!الوصف
|-
|<code>[[CSS/align-content|align-content]]</code>
|تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex.
|-
|<code>[[CSS/align-items|align-items]]</code>
|تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الثانوي من حاوية flex. فهي تعمل كالخاصية <code>[[CSS/justify-content|justify-content]]</code> لكن في الاتجاه المعامد.
|-
|<code>[[CSS/align-self|align-self]]</code>
|تضبط محاذاة عناصر flex في السطر الحالي متجاوزةً قيمة الخاصية <code>[[CSS/align-items|align-items]]</code>، وإذا كانت حاشية <code>[[CSS/margin|margin]]</code> أحد العناصر في المحور المعامد مضبوطةً إلى <code>auto</code>فسيتم تجاهل الخاصية <code>align-self</code>.
|-
|<code>[[CSS/flex|flex]]</code>
|تُحدِّد كيف سيتمدد أو يتقلص أحد عناصر flex لكي يملأ المساحة المتوافرة في حاوية flex. هذه الخاصية المختصرة تضبط الخاصيات <code>[[CSS/flex-grow|flex-grow]]</code> و <code>[[CSS/flex-shrink|flex-shrink]]</code>و <code>[[CSS/flex-basis|flex-basis]]</code>.
|-
|<code>[[CSS/flex-basis|flex-basis]]</code>
|تُحدِّد القياس الرئيسي (main size) لأحد عناصر flex، وهذه الخاصية تضبط قياس صندوق المحتوى (content box) إلا إذا حُدِّدَ غير ذلك باستخدام الخاصية <code>[[CSS/box-sizing|box-sizing]]</code>.
|-
|<code>[[CSS/flex-direction|flex-direction]]</code>
|تُعرِّف ما هو المحور الرئيسي (main axis) في حاوية flex وما اتجاهه (عادي أم معكوس).
|-
|<code>[[CSS/flex-flow|flex-flow]]</code>
|تستعمل لضبط قيمة الخاصيتين <code>[[CSS/flex-direction|flex-direction]]</code> و <code>[[CSS/flex-wrap|flex-wrap]]</code>.
|-
|<code>[[CSS/flex-grow|flex-grow]]</code>
|تُحدِّد معامل التمدد لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex.
|-
|<code>[[CSS/flex-shrink|flex-shrink]]</code>
|تُحدِّد معامل التقلص لأحد عناصر flex، وهي تُحدِّد مقدار المساحة التي يجب أن يأخذها العنصر داخل حاوية flex نسبةً إلى بقية العناصر، وذلك في حال كان العرض الافتراضي للعناصر flex أكبر من الحاوية.
|-
|<code>[[CSS/flex-wrap|flex-wrap]]</code>
|تُحدِّد فيما إذا كانت عناصر flex يجب أن تكون محتواةً في سطرٍ وحيد أم يمكن التفافها إلى عدِّة أسطر، وإذا سُمِحَ بالالتفاف (wrap) فيمكننا باستخدام هذه الخاصية تحديد ترتيب تكديس الأسطر.
|-
|<code>[[CSS/justify-content|justify-content]]</code>
|تُعرِّف طريقة توزيع المتصفح للمسافة بين العناصر وحولها على امتداد المحور الرئيسي من حاوية flex.
|-
|<code>[[CSS/order|order]]</code>
|تُحدِّد ترتيب عناصر flex في الحاوية، إذ ستُرتَّب العناصر ترتيبًا تصاعديًا اعتمادًا على قيمة الخاصية order المُسندَة إليها، والعناصر التي لها نفس القيمة ستُرتَّب وفق ورودها في الشيفرة المصدرية.
|}