الفرق بين المراجعتين لصفحة: «CSS/column-fill»
لا ملخص تعديل |
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
||
| سطر 94: | سطر 94: | ||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-fill CSS Multi-column Layout Module]. | * مواصفة [https://drafts.csswg.org/css-multicol-1/#column-fill CSS Multi-column Layout Module]. | ||
[[تصنيف:CSS]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Columns]] | [[تصنيف:CSS Columns|{{SUBPAGENAME}}]] | ||
مراجعة 15:35، 28 يناير 2018
الخاصية column-fill في CSS تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا.
إذا لم تُضبَط قيمة هذه الخاصية إلى balance، فستُملأ الأعمدة بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا، أما إذا ضُبِطَت إلى balance فسيحاول المتصفح أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان، لكن مع احترام الفواصل بين الصفحات، وقيمة الخاصية widows و orphans، وغيرهما من الخاصيات التي قد تؤثر على ارتفاع الأعمدة.
/* كلمة محجوزة */
column-width: auto;
/* <length> قيم طولية */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
/* القيم العامة */
column-width: inherit;
column-width: initial;
column-width: unset;
| القيمة الابتدائية | balance
|
|---|---|
| تُطبَّق على | العناصر متعددة الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
أمثلة
مثال عن استخدام الخاصية column-fill على عنصرَي <p> مع القيمتين auto و balance، لاحظ أنَّ تأثير الخاصية column-fill سيكون جليًا إذا كان ارتفاع العنصر مُحدَّدًا:
<p class="content-box balance">
<code>column-fill: balance;</code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<hr>
<p class="content-box auto">
<code>column-fill: auto;</code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
column-count: 3;
column-rule: 1px solid black;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
height: 200px;
}
.balance { column-fill: balance; }
.auto { column-fill: auto; }
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
50 (دون سابقة) |
2.0 (مع السابقة -moz-)
|
10 | 15 (مع السابقة -webkit-)
37 (دون سابقة) |
3.1 (مع السابقة -webkit-)
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-fill قيمةً من الكلمتين المحجوزتين التاليتين.
القيمة auto
تُشير هذه الكلمة المحجوزة إلى أنَّ الأعمدة ستُملأ بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا.
القيمة balance
تُشير هذه الكلمة المحجوزة إلى أنَّ المتصفح سيحاول أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان.
البنية الرسمية
column-fill: auto | balance;
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.