Articles
مقدمة إلى CSS
خصائص CSS المتعلقة بـ Flexbox

خصائص CSS المتعلقة بـ Flexbox

توضح هذه المقالة خصائص CSS المتعلقة بـ Flexbox۔

يمكنك تعلم كيفية استخدام flexbox و inline-flexbox۔

YouTube Video

HTML للمعاينة

css-flex.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-flex.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>flex</h3>
 23            <section>
 24            <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.flex-container {
 27    display: flex;
 28    justify-content: space-between;
 29    align-items: center;
 30    background-color: lightblue;
 31    height: 100px;
 32}
 33
 34.flex-item {
 35    background-color: lightskyblue;
 36    padding: 10px;
 37    margin: 5px;
 38    width: 70px;
 39    height: auto;
 40}
 41</pre>
 42            <header><h4>HTML</h4></header>
 43<pre>
 44&lt;div class="flex-container"&gt;
 45    &lt;div class="flex-item"&gt;1&lt;/div&gt;
 46    &lt;div class="flex-item"&gt;2&lt;/div&gt;
 47    &lt;div class="flex-item"&gt;3&lt;/div&gt;
 48&lt;/div&gt;
 49</pre>
 50            <header><h4>HTML+CSS</h4></header>
 51            <section class="sample-view">
 52                <div class="flex-container">
 53                    <div class="flex-item">Item 1</div>
 54                    <div class="flex-item">Item 2</div>
 55                    <div class="flex-item">Item 3</div>
 56                </div>
 57            </section>
 58          </section>
 59        </article>
 60        <article>
 61          <h3>flex-direction</h3>
 62          <section>
 63            <header><h4>flex-direction: row</h4></header>
 64            <section class="sample-view">
 65                <div class="flex-container" style="flex-direction: row;">
 66                    <div class="flex-item">Item 1</div>
 67                    <div class="flex-item">Item 2</div>
 68                    <div class="flex-item">Item 3</div>
 69                </div>
 70            </section>
 71            <header><h4>flex-direction: row-reverse</h4></header>
 72            <section class="sample-view">
 73                <div class="flex-container" style="flex-direction: row-reverse;">
 74                    <div class="flex-item">Item 1</div>
 75                    <div class="flex-item">Item 2</div>
 76                    <div class="flex-item">Item 3</div>
 77                </div>
 78            </section>
 79            <header><h4>flex-direction: column</h4></header>
 80            <section class="sample-view">
 81                <div class="flex-container" style="flex-direction: column; height: 200px;">
 82                    <div class="flex-item">Item 1</div>
 83                    <div class="flex-item">Item 2</div>
 84                    <div class="flex-item">Item 3</div>
 85                </div>
 86            </section>
 87            <header><h4>flex-direction: column-reverse</h4></header>
 88            <section class="sample-view">
 89                <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
 90                    <div class="flex-item">Item 1</div>
 91                    <div class="flex-item">Item 2</div>
 92                    <div class="flex-item">Item 3</div>
 93                </div>
 94            </section>
 95          </section>
 96        </article>
 97        <article>
 98          <h3>justify-content</h3>
 99          <section>
100            <header><h4>justify-content: flex-start</h4></header>
101            <section class="sample-view">
102                <div class="flex-container" style="justify-content: flex-start;">
103                    <div class="flex-item">Item 1</div>
104                    <div class="flex-item">Item 2</div>
105                    <div class="flex-item">Item 3</div>
106                </div>
107            </section>
108            <header><h4>justify-content: flex-end</h4></header>
109            <section class="sample-view">
110                <div class="flex-container" style="justify-content: flex-end;">
111                    <div class="flex-item">Item 1</div>
112                    <div class="flex-item">Item 2</div>
113                    <div class="flex-item">Item 3</div>
114                </div>
115            </section>
116            <header><h4>justify-content: center</h4></header>
117            <section class="sample-view">
118                <div class="flex-container" style="justify-content: center;">
119                    <div class="flex-item">Item 1</div>
120                    <div class="flex-item">Item 2</div>
121                    <div class="flex-item">Item 3</div>
122                </div>
123            </section>
124            <header><h4>justify-content: space-between</h4></header>
125            <section class="sample-view">
126                <div class="flex-container" style="justify-content: space-between;">
127                    <div class="flex-item">Item 1</div>
128                    <div class="flex-item">Item 2</div>
129                    <div class="flex-item">Item 3</div>
130                </div>
131            </section>
132            <header><h4>justify-content: space-around</h4></header>
133            <section class="sample-view">
134                <div class="flex-container" style="justify-content: space-around;">
135                    <div class="flex-item">Item 1</div>
136                    <div class="flex-item">Item 2</div>
137                    <div class="flex-item">Item 3</div>
138                </div>
139            </section>
140          </section>
141        </article>
142        <article>
143          <h3>align-items</h3>
144          <section>
145            <header><h4>align-items: flex-start</h4></header>
146            <section class="sample-view">
147                <div class="flex-container" style="align-items: flex-start; height: 150px;">
148                    <div class="flex-item">Item 1</div>
149                    <div class="flex-item">Item 2</div>
150                    <div class="flex-item">Item 3</div>
151                </div>
152            </section>
153            <header><h4>align-items: center</h4></header>
154            <section class="sample-view">
155                <div class="flex-container" style="align-items: center; height: 150px;">
156                    <div class="flex-item">Item 1</div>
157                    <div class="flex-item">Item 2</div>
158                    <div class="flex-item">Item 3</div>
159                </div>
160            </section>
161            <header><h4>align-items: flex-end</h4></header>
162            <section class="sample-view">
163                <div class="flex-container" style="align-items: flex-end; height: 150px;">
164                    <div class="flex-item">Item 1</div>
165                    <div class="flex-item">Item 2</div>
166                    <div class="flex-item">Item 3</div>
167                </div>
168            </section>
169            <header><h4>align-items: stretch</h4></header>
170            <section class="sample-view">
171                <div class="flex-container" style="align-items: stretch; height: 150px;">
172                    <div class="flex-item">Item 1</div>
173                    <div class="flex-item">Item 2</div>
174                    <div class="flex-item">Item 3</div>
175                </div>
176            </section>
177            <header><h4>align-items: baseline</h4></header>
178            <section class="sample-view">
179                <div class="flex-container" style="align-items: baseline; height: 150px;">
180                    <div class="flex-item">Item 1</div>
181                    <div class="flex-item">Item 2</div>
182                    <div class="flex-item">Item 3</div>
183                </div>
184            </section>
185          </section>
186        </article>
187        <article>
188          <h3>flex-wrap</h3>
189          <section>
190            <header><h4>flex-wrap: nowrap</h4></header>
191            <section class="sample-view">
192                <div class="flex-container" style="flex-wrap: nowrap;">
193                    <div class="flex-item">Item 1</div>
194                    <div class="flex-item">Item 2</div>
195                    <div class="flex-item">Item 3</div>
196                    <div class="flex-item">Item 4</div>
197                    <div class="flex-item">Item 5</div>
198                    <div class="flex-item">Item 6</div>
199                    <div class="flex-item">Item 7</div>
200                    <div class="flex-item">Item 8</div>
201                    <div class="flex-item">Item 9</div>
202                </div>
203            </section>
204            <header><h4>flex-direction: wrap</h4></header>
205            <section class="sample-view">
206                <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207                    <div class="flex-item">Item 1</div>
208                    <div class="flex-item">Item 2</div>
209                    <div class="flex-item">Item 3</div>
210                    <div class="flex-item">Item 4</div>
211                    <div class="flex-item">Item 5</div>
212                    <div class="flex-item">Item 6</div>
213                    <div class="flex-item">Item 7</div>
214                    <div class="flex-item">Item 8</div>
215                    <div class="flex-item">Item 9</div>
216                </div>
217            </section>
218            <header><h4>flex-direction: wrap-reverse</h4></header>
219            <section class="sample-view">
220                <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221                    <div class="flex-item">Item 1</div>
222                    <div class="flex-item">Item 2</div>
223                    <div class="flex-item">Item 3</div>
224                    <div class="flex-item">Item 4</div>
225                    <div class="flex-item">Item 5</div>
226                    <div class="flex-item">Item 6</div>
227                    <div class="flex-item">Item 7</div>
228                    <div class="flex-item">Item 8</div>
229                    <div class="flex-item">Item 9</div>
230                </div>
231            </section>
232          </section>
233        </article>
234        <article>
235          <h3>flex-grow</h3>
236          <section>
237            <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240  flex-grow: 1;
241}
242
243.item2 {
244  flex-grow: 2;
245}
246
247.item3 {
248  flex-grow: 0;
249}</pre>
250            <header><h4>HTML+CSS</h4></header>
251            <section class="sample-view">
252                <div class="flex-container">
253                    <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254                    <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255                    <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256                </div>
257            </section>
258          </section>
259        </article>
260        <article>
261          <h3>flex-shrink</h3>
262          <section>
263            <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266  flex-shrink: 0;
267}
268.item2 {
269  flex-shrink: 1;
270}
271.item3 {
272  flex-shrink: 1;
273}</pre>
274            <header><h4>HTML+CSS</h4></header>
275            <section class="sample-view">
276                <div class="flex-container" style="width: 200px;">
277                    <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278                    <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279                    <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280                </div>
281            </section>
282          </section>
283        </article>
284        <article>
285          <h3>flex-basis</h3>
286          <section>
287            <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290  flex-basis: 100px;
291}
292.item2 {
293  flex-basis: 200px;
294}
295.item3 {
296  flex-basis: 25%;
297}</pre>
298            <header><h4>HTML+CSS</h4></header>
299            <section class="sample-view">
300                <div class="flex-container">
301                    <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302                    <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303                    <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304                </div>
305            </section>
306          </section>
307        </article>
308        <article>
309          <h3>align-self</h3>
310          <section>
311            <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314  align-self: flex-start;
315}
316.item2 {
317  align-self: center;
318}
319.item3 {
320  align-self: flex-end;
321}</pre>
322            <header><h4>HTML+CSS</h4></header>
323            <section class="sample-view">
324                <div class="flex-container" style="height: 150px;">
325                    <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326                    <div class="flex-item" style="align-self: center;">Item 2</div>
327                    <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328                </div>
329            </section>
330          </section>
331        </article>
332        <article>
333          <h3>order</h3>
334          <section>
335            <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338  order: 3;
339}
340
341.item2 {
342  order: 1;
343}
344
345.item3 {
346  order: 2;
347}</pre>
348            <header><h4>HTML+CSS</h4></header>
349            <section class="sample-view">
350                <div class="flex-container">
351                    <div class="flex-item" style="order: 3;">Item 1</div>
352                    <div class="flex-item" style="order: 1;">Item 2</div>
353                    <div class="flex-item" style="order: 2;">Item 3</div>
354                </div>
355            </section>
356          </section>
357        </article>
358        <article>
359            <h3>inline-flex</h3>
360            <section>
361                <header><h4>display: inline-flex</h4></header>
362                <section class="sample-view">
363                  Here is an example of inline-flex:
364                  <div class="inline-container">
365                      <div class="inline-item">1</div>
366                      <div class="inline-item">2</div>
367                      <div class="inline-item">3</div>
368                  </div>
369                  This text is in the same line as the inline-flex container.
370                </section>
371            </section>
372        </article>
373    </main>
374</body>
375</html>

Flexbox و Inline Flexbox

flex 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    height: 100px;
 6}
 7
 8.flex-item {
 9    background-color: lightskyblue;
10    padding: 10px;
11    margin: 5px;
12    width: 70px;
13    height: auto;
14}

flex هي خاصية تُستخدم في CSS لمحاذاة وترتيب العناصر بكفاءة، وهي جزء من نظام تخطيط flexbox.۔ يُستخدم هذا النظام لتسهيل محاذاة وتوزيع العناصر الفرعية (عناصر flex) داخل حاوية، وهو أكثر مرونة من float أو position التقليديين.۔

  • تُحدد الفئة flex-box خاصية display كـ flex لتطبيق تخطيط flex.۔
  • تعمل خاصية justify-content مع space-between على وضع العناصر عند الأطراف اليمنى واليسرى مع توزيع متساوٍ للمسافة بينها.۔
  • تُستخدم خاصية align-items مع القيمة center لمحاذاة العناصر عموديًا في المنتصف.۔

الهيكل الأساسي لـ Flexbox 

 1<div class="flex-container">
 2  <div class="flex-item">Item 1</div>
 3  <div class="flex-item">Item 2</div>
 4  <div class="flex-item">Item 3</div>
 5</div>
 6
 7<style>
 8.flex-container {
 9  display: flex;
10  /* Other flex properties */
11  flex-direction: row | row-reverse | column | column-reverse;
12  justify-content: flex-start | flex-end | center | space-between | space-around;
13  align-items: stretch | flex-start | flex-end | center | baseline;
14  flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17  /* Styles applied to individual items */
18  flex-grow: 0 | 1 | 2 | ...;
19  flex-shrink: 0 | 1;
20  flex-basis: auto | 10px | 25% | ...;
21  align-self: stretch | flex-start | flex-end | center | baseline;
22  order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>

يوجد في Flexbox مكونان رئيسيان: الحاوية المرنة والعناصر المرنة۔

  1. الحاوية المرنة هي العنصر الأب الذي يحيط بالعناصر الفرعية، ويتم تحديدها باستخدام display: flex۔
  2. العناصر المرنة هي العناصر الموجودة داخل الحاوية المرنة، وهي الأطفال المباشرون للحاوية۔
خصائص حاوية Flex

الخصائص التالية تتعلق بحاوية flex۔

  • حدد flex في خاصية display لتعريف حاوية flex.۔ تصبح العناصر الفرعية الداخلية عناصر flex.۔

  • تحدد خاصية flex-direction الاتجاه الذي يتم فيه وضع عناصر flex.۔ يمكن تحديد القيم التالية:۔

    • row: تتم المحاذاة أفقيًا من اليسار إلى اليمين.۔ هذه هي القيمة الافتراضية۔
    • row-reverse: تتماشى أفقياً من اليمين إلى اليسار۔
    • column: تتماشى عمودياً من الأعلى إلى الأسفل۔
    • column-reverse: تتماشى عمودياً من الأسفل إلى الأعلى۔

  • خاصية justify-content تحدد كيفية محاذاة العناصر المرنة أفقياً (على طول المحور الرئيسي)۔

    • flex-start: محاذاة إلى البداية (اليسار)۔
    • flex-end: محاذاة إلى النهاية (اليمين)۔
    • center: محاذاة إلى المركز۔
    • space-between: توزيع المساحة بالتساوي بين العناصر۔
    • space-around: توزيع المساحة بالتساوي حول العناصر۔

  • خاصية align-items تحدد كيفية محاذاة العناصر عمودياً (على طول المحور المتقاطع)۔

    • flex-start: محاذاة إلى الأعلى۔
    • center: محاذاة عمودياً إلى المركز۔
    • flex-end: محاذاة إلى الأسفل۔
    • stretch: يتمدد لملء ارتفاع الحاوية۔
    • baseline: محاذاة حسب خط أساس النص۔

  • خاصية flex-wrap تحدد ما إذا كان ينبغي التفاف العناصر إذا تجاوزت عرض الحاوية۔

    • nowrap: بدون التفاف۔ هذه هي القيمة الافتراضية۔
    • wrap: يلتف حول العناصر۔
    • wrap-reverse: يلتف حول العناصر بترتيب عكسي۔
خصائص العناصر المرنة

الخصائص التالية تتعلق بالعناصر المرنة۔

  • خاصية flex-grow تحدد معدل نمو العنصر۔ كلما كانت القيمة أكبر، كلما زادت المساحة التي يحتلها العنصر مقارنة بالآخرين۔

    • إذا كانت القيمة 0، فلن ينمو العنصر۔ هذه هي القيمة الافتراضية۔
    • إذا كانت القيمة 1 أو أعلى، فيتم تحديد معدل النمو۔

  • تحدد خاصية flex-shrink معدل تقليص العنصر۔ كلما زادت القيمة، زاد تقليص العنصر۔

    • إذا كانت القيمة 1، سيتم تقليص العنصر عند عدم توفر مساحة كافية۔ هذه هي القيمة الافتراضية۔
    • إذا كانت القيمة 0، لن يتم تقليص العنصر۔

  • تحدد خاصية flex-basis العرض أو الارتفاع الأولي لكل عنصر۔ عادةً ما تكون القيمة هي الحجم على المحور الرئيسي۔ القيمة الافتراضية هي auto وتعتمد على حجم المحتوى، ولكن يمكنك تحديد قيم ثابتة بالبكسل أو بالنسبة المئوية۔

  • تحدد خاصية align-self كيفية محاذاة عنصر فردي من عناصر الفليكس على طول المحور العرضي۔ يمكن أن تتجاوز القيمة المحددة بواسطة align-items۔

  • تغير خاصية order ترتيب عرض عناصر الفليكس۔ القيمة الافتراضية هي 0، ولكن إذا تم تحديد رقم موجب يتحرك إلى لاحقاً، وإذا كان سالب يتحرك إلى سابقاً۔

مزايا الفلكس بوكس

تشمل مزايا الفلكس بوكس النقاط التالية:۔

  • تخطيط مرن: يمكنك التحكم بشكل مرن في المحاذاة، التباعد، واتجاه العناصر۔
  • مثالي لتصميمات الاستجابة: يتم ضبط العناصر الفرعية تلقائيًا وفقًا لحجم العنصر الأب۔

inline-flex 

 1.inline-container {
 2    display: inline-flex;
 3    border: 2px solid #000;
 4    padding: 10px;
 5    justify-content: space-between;
 6    background-color: lightblue;
 7    width: 150px;
 8    height: 50px;
 9}
10.inline-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 20px;
15    height: auto;
16}

  • inline-flex هو نمط تخطيط في CSS يتيح لك تخطيط المحتويات باستخدام الفليكس بوكس مع محاذاة العنصر وفقاً لتدفق الخط العادي۔ يتصرف بنفس الطريقة مثل display: flex، ولكن خاصية inline-flex تجعل العنصر نفسه يتصرف كعنصر خطي۔

  • في هذا المثال، تم تطبيق inline-flex على الفئة container۔ وبالتالي، تتصرف الفئة container كعنصر على المستوى الأفقي داخل عنصر <div> الأب۔ في الوقت نفسه، يتم ترتيب عناصر الفئة item، وهي عناصر فرعية داخل الفئة container، وفقًا لقواعد الفليكس بوكس۔ في هذا المثال، تم استخدام justify-content: space-between، لذلك يتم توزيع المساحة بالتساوي بين العناصر الفرعية۔

حالات استخدام inline-flex

inline-flex مفيدة بشكل خاص في حالات مثل:۔

  • عندما تريد استخدام تخطيط فليكس مع العناصر المدمجة إنه مفيد عندما تحتاج إلى استخدام الفلكسبوكس لتنسيق المكونات الصغيرة في واجهة المستخدم مثل الأزرار أو الأيقونات۔ على سبيل المثال، عندما تريد محاذاة أيقونة ونص بجانب بعضهما البعض ومركزة كليهما۔

  • عند بناء تخطيطات معقدة مع الحفاظ على التدفق المدمج يُستخدم عندما تريد الاستفادة من قوة الفلكسبوكس لجعل التخطيط الداخلي مرنًا مع جعله يعمل كعنصر مدمج۔ على سبيل المثال، عندما تريد ترتيب عدة عناصر في نفس الصف وضبط العناصر الفرعية بداخلها۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

خصائص CSS المتعلقة بالتخطيط