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 items) בתוך מיכל, והיא גמישה יותר מאשר השימוש המסורתי ב-float או position.

  • מחלקת flex-box מגדירה את תכונת ה-display כ-flex כדי להפעיל את פריסת ה-Flexbox.
  • תכונת 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 יש שני מרכיבים עיקריים: הקונטיינר (flex container) והפריטים (flex items).

  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, אך הגדרת מספר חיובי מזיזה את הפריט קדימה, ומספר שלילי מזיזה אותו אחורה.

יתרונות Flexbox

היתרונות של Flexbox כוללים את הנקודות הבאות:.

  • פריסה גמישה: ניתן לשלוט בגמישות ביישור, בריווח ובכיוון של אלמנטים.
  • מתאים במיוחד לעיצוב רספונסיבי: אלמנטים ילד מתאימים את עצמם באופן אוטומטי לגודל אלמנט האב.

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 שמאפשר לפרוס את התוכן באמצעות Flexbox תוך יישור האלמנט בהתאם לזרימת ה-inline. הוא מתנהג בדומה ל-display: flex, אך inline-flex גורם לאלמנט עצמו להתנהג כאילו הוא ברמת inline.

  • בדוגמה זו, המאפיין inline-flex מיושם על המחלקה container. לכן, המחלקה container מתנהגת כאילו היא ברמת inline בתוך אלמנט ה-<div> האב. באותו זמן, האלמנטים מהמחלקה item, שהם אלמנטים ילד בתוך המחלקה container, נפרסים בהתאם לחוקי הפלקסבוקס. בדוגמה זו נעשה שימוש ב-justify-content: space-between, כך שהשטח מחולק באופן שווה בין אלמנטים ילד.

שימושים ל-inline-flex

inline-flex שימושי במיוחד במקרים כגון:.

  • כאשר אתה רוצה להשתמש בפריסת Flex עם אלמנטים אינליין זה שימושי כאשר אתה צריך להשתמש ב-Flexbox למיקום ברכיבי ממשק משתמש קטנים כמו כפתורים או אייקונים. לדוגמה, כאשר אתה רוצה ליישר אייקון וטקסט זה לצד זה ולמרכז אותם.

  • כאשר בונים פריסות מורכבות תוך שמירה על זרימה אינליין משתמשים בזה כאשר אתה רוצה לנצל את הכוח של Flexbox בכדי להפוך את הפריסה הפנימית לגמישה תוך כדי תפקוד כאלמנט אינליין. לדוגמה, כאשר אתה רוצה ליישר מספר אלמנטים באותה שורה ולהתאים אלמנטים פנימיים בתוכם.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות CSS הקשורות לפריסה