English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل CSS3 الأساسي

تخطيط صندوق التمدد CSS3

CSS3 flexible Box أو flexbox هو نموذج تخطيط جديد يُستخدم لإنشاء تصميمات واجهة المستخدم المرنة.

فهم نموذج التخطيط Flex

Flexible box، يُعرف أيضًا بـflexbox، هو نموذج تخطيط جديد تم إطلاقه في CSS3، يُستخدم لإنشاء تصميمات واجهة المستخدم المرنة مع عدة صفوف وأعمدة دون استخدام النسب أو القيم الثابتة. CSS3 يقدم نموذج التخطيط flex ميكانيكية بسيطة وقوية، تتيح لملفات النصوص التوضيحية التعامل تلقائيًا مع توزيع المساحة وتنظيم المحتويات دون التدخل في العلامات الفعلية.

السلسلة التالية تظهر كيفية استخدام نموذج التخطيط flex لإنشاء تصميم ثلاثة أعمدة، حيث تكون عرض كل عمود وارتفاعه متساويين.

!
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Three Equal Flex Column</title>
<style>
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border: 1px solid #808080;
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-ms-flex: 1; /* IE 10 */
　　　　　　　　flex:　1;　
　　　　}
</style>
</head>Item 1Item 2Item 3</html>
اختبرها و شاهدها‹/›

If you carefully observe the above example code, you will notice that we did not include in the.flex-container<div>If you pay close attention to the example code above, you will find that we did not use the internal

How Flexbox works

Flexbox consists of Flex containers and Flex items. You can specify any width on the top, but you can see in the output that the width of each column is exactly one-third of the parent element.flex-container.displayelement's properties set to flex (to generateblock Flex container) or inline-flex (to generate a block-likeinline-blockof the inline Flex container) to create a Flex container. All child elements of the flex container will automatically become flex items and be laid out using the flex layout model. offloat،clearوvertical-alignproperties have no effect on the elastic items.

The stretch item along theflex-directionThe stretch line specified by the property is located within the stretch container. By default, each flex container has only one elastic line, which is in the direction of the inline axis orText direction is the same. The following figure will help you understand the terms of Flex layout.

Specify the flow inside the Flex container

In the standard CSS box model, elements are usually displayed in the order they appear in the underlying HTML markup. The Flexbox layout allows you to control the direction of the flow within a Flex container, so that elements can be laid out in any flow direction such as left, right, down, or even up.

You can useflex-directionThis property specifies the flex item flow within the flex container. The default value of row is the same as the current writing mode or text direction of the document, for example, English from left to right.

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}
اختبرها و شاهدها‹/›

Similarly, you can display flex items in a column form within a flex container instead of using the column value of the flex-direction property, as shown below:

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}
اختبرها و شاهدها‹/›

控制伸缩项的尺寸

弹性布局的最重要方面是弹性项目改变其宽度或高度以填充可用空间的能力。这是通过flex属性实现的。这是速记属性flex-grow،flex-shrink而flex-basis属性。

弹性容器将可用空间与其弹性生长因子成正比地分布到其项目，或收缩它们以防止溢出与其弯曲收缩系数成比例。

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2 {
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}
اختبرها و شاهدها‹/›

在上面的示例中，第一个和第三个伸缩项目将占用1/4，即1/(1+1+2)的自由空间，而第二个伸缩项目将占用1/2，即2/(1+1+2)的自由空间。类似地，您可以使用这个简单的技术创建其他灵活的布局。

ملاحظة:强烈建议使用速记属性，而不是单独的flex属性，因为它可以正确重置未指定的组件。

在Flex容器中对齐Flex项目

有四个属性justify-content،align-content،align-itemsوalign-self其目的是为了指定弹性容器内的弹性项目的对准。其中的前三个适用于flex容器，而最后一个适用于单个flex项目。

沿主轴对齐Flex项目

使用justify-content属性，可以将伸缩项沿伸缩容器的主轴（即在水平方向上）对齐。通常在弹性项目未使用主轴上所有可用空间的情况下使用。

justify-content属性接受以下值：

  • flex-start-默认值。弹性项目放置在主轴的起点。

  • flex-end -Flex项目位于主轴的末端。

  • منتصف　　- Flex的项目放置在主轴线的与等量的自由空间在两端的中心。如果剩余的自由空间为负，即项目溢出，则弹性项目将在两个方向上均等溢出。

  • space-between　-的Flex项都沿着主轴线，其中第一项放置在主起始沿和最后一个放置在主端均匀地分布。如果项目溢出或只有一项，则此值等于flex-start。

  • space-around　-Flex项在两端均以一半大小的空间均匀分布。如果它们溢出或只有一项，则此值等于center。

هذا المثال سيوضح تأثير قيم الخاصية justify-content المختلفة على وحدات flex المتعددة الأعمدة ذات العرض الثابت.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1 {
　　　　العرض: 75px;
　　　　background: #e84d51;
}
.item2 {
　　　　العرض: 125px;
　　　　background: #7ed636;
}
.item3 {
　　　　العرض: 175px;
　　　　background: #2f97ff;
}
اختبرها و شاهدها‹/›

تسوية مشروعات Flex على المحور الأفقي

يمكن استخدام خاصية align-items أو align-self لتسوية مشروعات Flex على المحور الأفقي للوحدة Flex (أي اتجاه صعودي). ولكن عند تطبيق align-items على وحدة Flex، يتم تطبيق خاصية align-self على مشروع Flex فردي، ويغطي align-items. تقبل هاتان الخاصيتان القيم التالية:

  • flex-start — يتم وضع مشروعات Flex في بداية المحور المتقاطع.

  • flex-end — يتم وضع مشروعات Flex في نهاية المحور المتقاطع.

  • منتصف　— يتم وضع العنصر المرن في منتصف المحور الأفقي، مع مساحة متساوية من الفضاء المتاح عند كل نهاية. إذا كان الفضاء الحر المتبقي سالباً، أي أن العنصر يخرج عن الحدود، فإن العنصر المرن سيخرج بشكل متساوٍ في كلا الاتجاهين.

  • الأساس　— يتم تسوية نص كل عنصر مرن (أو المحور المتوازي) مع الأساس الأكبر للنص المرن.حجم الخط.

  • التمدد — يتم تمدد العناصر لتعبئة الصف أو العمود الحالي، ما لم تمنع الأحجام الأدنى والأعلى للعرض أو الارتفاع. القيمة الافتراضية لخصوصية align-items.

هذا المثال سيوضح تأثير قيم الخاصية align-items المختلفة على وحدات flex المتعددة الأعمدة ذات الارتفاع الثابت.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1 {
　　　　العرض: 75px;
　　　　height: 100px;
　　　　background: #e84d51;
}
.item2 {
　　　　العرض: 125px;
　　　　الارتفاع: 200px;
　　　　background: #7ed636;
}
.item3 {
　　　　العرض: 175px;
　　　　الارتفاع: 150px;
　　　　background: #2f97ff;
}
اختبرها و شاهدها‹/›

يمكنك أيضًا توزيع المساحة المتاحة على المحور الأفقي في وحدات flex المتعددة الأعمدة أو الصفوف. تستخدم الخاصية align-content لتسوية صفوف وحدات flex، على سبيل المثال، إذا كان هناك مساحة زائدة على المحور الأفقي، فإنها تسوية صفوف وحدات flex التي تحتوي على الصفوف لjustify-content، مثل تسوية عنصر واحد مع المحور الرئيسي.

تقبل خاصية align-content نفس القيم مثل الخاصية justify-content، ولكن تطبقها على المحور الأفقي بدلاً من المحور الرئيسي. وتقبل أيضًا قيمة أخرى:

  • التمددتوزع المساحة المتاحة بشكل متساوٍ بين جميع الصفوف أو الأعمدة لزيادة حجم التداخل. إذا كان الفضاء الحر المتبقي سالباً، فإن هذه القيمة تساوي flex-start.

هذا المثال سيوضح تأثير قيم الخاصية align-content المختلفة على وحدات flex المتعددة الأعمدة ذات الارتفاع الثابت.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size: 32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width: 150px;
　　　　height: 100px;
　　　　background:　#dbdfe5;
}
اختبرها و شاهدها‹/›

إعادة ترتيب مشاريع Flex

بالإضافة إلى تغيير تدفق صندوق الإلتزام، يمكنك أيضًا تغييرorderيظهر هذا السمة ترتيب المشروع الفردى للإلتزام. تقبل هذه الخاصية عددًا صحيحًا أو عددًا سالبًا كقيمة. بشكل افتراضي، يتم عرض جميع مشاريع الإلتزام وتنسيقها وفقًا للترتيب الذي يظهر فيه في العلامة HTML، لأن قيمة order الافتراضية هي 0.

هذا المثال سيعرض لك كيفية تحديد ترتيب المشروع الفردى للإلتزام.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display: -webkit-flex; /* Safari 6.1+ */
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1 {
　　　　background: #e84d51;
　　　　-webkit-order: 2; /* Safari 6.1+ */
　　　　order: 2;
}
.item2 {
　　　　background: #7ed636;
　　　　-webkit-order: 1; /* Safari 6.1+ */
　　　　order: 1;
}
.item3 {
　　　　background: #2f97ff;
　　　　-webkit-order: -1; /* Safari 6.1+ */
　　　　order: -1;
}
اختبرها و شاهدها‹/›

ملاحظة:يوضع المشروع ذو التدرج الأدنى في المقدمة، والمشروع ذو التدرج الأعلى في الخلف. سيتم عرض المشروعات التي لها نفس قيمة التدرج وفقًا للترتيب التي تظهر فيها في المستند الأصلي.

تحديد الوسط الافقى والعمودى لFlexbox

عادةً، التزام الدقة تتطلب استخدام JavaScript أو بعض تقنيات CSS البسيطة. ولكن، يمكن تنفيذ هذه العملية بسهولة باستخدام flexbox دون أي تعديل.

هذا المثال سيعرض لك كيفية استخدام وظيفة الشريط اللياقة في CSS3 لتحقيق التزام في المنتصف عموديًا وأفقياً بسهولة.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display: -webkit-flex; /* Safari 6.1+ */
　　　　display:　flex;　
}
.item {
　　　　width: 300px;
　　　　padding: 25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}
اختبرها و شاهدها‹/›

تمكين تغيير السطر للإلتزام

بالتشخيص، صندوق الإلتزام يعرض فقط السطر الواحد أو العمود الواحد للإلتزام. ولكنflex-wrapإذا لم يكن هناك مساحة كافية في خط التمدد، يمكنك استخدام خصائص صندوق التمدد لتحديد ما إذا كان يجب تمرير العناصر التمدد إلى أسطر متعددة.

يقبل خاصية flex-wrap القيم التالية:

  • nowrap-القيمة الافتراضية. يتم وضع العناصر التمدد في سطر واحد. إذا لم يكن هناك مساحة كافية في الخط التمدد، قد يؤدي ذلك إلى التدفق الزائد.

  • wrap — ستمزق صندوق التمدد عناصره التمدد إلى أسطر متعددة، مثل كيفية تقسيم النص إذا كان واسعًا جدًا لدرجة أنه لا يمكن احتوائه في السطر الحالي، ويتم تقسيمه إلى سطر جديد.

  • wrap-reverse — سيتم تمرير العناصر التمدد عند الحاجة إلى سطرين، لكن الترتيب سيكون عكسياً، أي،بداية التداخل (cross-start)ونهاية التداخل(cross-end)سيتبادل الاتجاهان.

سيعرض لك المثال التالي كيفية استخدام خاصية flex-wrap لعرض عناصر flex في سطر واحد أو عدة أسطر داخل وحدة التمدد.

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}
اختبرها و شاهدها‹/›

ملاحظة:يمكنك أيضًا استخدام خصائص CSS مختصرة في بيان واحدflex-flowضبط flex-direction و flex-wrap. إنه يتقبل نفس القيم التي يتقبلها كل خصائصها، ويجوز أن تكون بأي ترتيب.

مرشحات CSS3 (Filters)حجم الصندوق CSS3 (box-sizing)