המדריך האולטימטיבי ל Flexbox

המדריך המלא לשימוש ב Flexbox – מיקום ויישור אלמנטים בקונטיינר, תכונות Flex לאלמנטים אינדיבידואלים ועוד…

השימוש בגריד כזה או אחר היה מאז ומתמיד חלק בלתי נפרד מעיצוב ופיתוח אתרים. סביר להניח כי נתקלתם לא פעם באתרים הבנויים על CSS Framework כלשהו כגון Bootstrap, Foundation וכדומה שמאפשרים שימוש בקלאסים מוכנים ליצירת גריד הבנוי מעמודות ושורות.

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

למעשה, גם כאשר אני משתמש באותם Frameworks, ברוב המקרים הדבר היחיד בו אני נעזר הוא השימוש ב Grid Layouts לטובת עימוד בלבד ולא בשאר אפשרויות העיצוב.

אז כיצד ניתן ליצור את אותם עימודים בצורה קלה ומהירה? כיצד ליישר אלמנטים בצורה נוחה? Flexbox (פלקסבוקס) זו התשובה כמעט תמיד, במיוחד כשמדובר על עימודים חד מימדיים, ושלא כמו CSS Grid המיועד בד״כ עבור עימוד דו מימדי.

במדריך זה נסביר בהרחבה על Flexbox, על כיצד להשתמש בתכונות ה justification וה alignment שהיא מציעה, ונעבור על מרבית התכונות הקיימות עבורכם ב Flexbox.

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

Flexbox – מבט כללי

ב Flexbox קיימים שני סוגים של ״קופסאות״ – האחת נקראית Flex Container והשנייה היא Flex Item.  בגדול – תפקידו של ה Flex Container הוא לקבץ מספר Flex Items יחד ולקבוע כיצד אלו ממוקמים.

Flex Items vs Flex Container | קרדיט: internetingishard.com

Flex Items vs Flex Container | קרדיט: internetingishard.com

אז חשוב להבין כי כל אלמנט שהוא ילד ישיר של Flex Container הוא בעצם Flex Item. ניתן לבצע מניפולציות על Flex Items אינדיבידואלית, ועוד נדבר על כך בהמשך, אך במרבית המקרים יהיה זה תפקידו של Flex Container לקבוע מתווה (Layout).

אם נוסיף את התכונה display : flex לקונטיינר, הילדים הישירים של קונטיינר זה יהיו Flex Items המסודרים בשורה כברירת מחדל. אז ה HTML וה CSS הבאים:

<div class="flex-container">
    <div>Flex Item</div>
    <div>Flex Item</div>
    <div>Flex Item</div>
</div>
.flex-container {
    display: flex;
}

יובילו לתוצאה הבאה:

Flex Item
Flex Item
Flex Item

חשוב שתבינו מהם Flex Items ומהו Flex Container בכדי שפוסט זה יהיה ברור. כמו כן, כנראה ואתייחס במהלך הפוסט ל Flex Container כ״קונטיינר״ ול Flex Items כ״אלמנטים״ למען פשטות.


ציר ה-X האופקי וציר ה-Y האנכי

בכדי שנוכל להדגים זאת ובכדי להבין כיצד התכונה Flexbox עובדת בצורה המיטבית – חשוב כי תבינו את ההתייחסות של Flexbox לציר ה-X האופקי הנקרא גם Main-Axis ולציר ה-Y האנכי הנקרא Cross-Axis.

תנו מבט בתמונות הבאות המתארות את ההתייחסות לצירים:

Flexbox Axis LTR - פלקסבוקס

עם האתר שלכם בעברית (RTL), ציר ה X ישנה כיוון כמובן, כלומר יתחיל בימין ויגמר בשמאל:

Flexbox Axis RTL - פלקסבוקס

הדוגמאות בפוסט זה יהיו בהתאם מכיוון ובלוג זה בעברית.


מיקום ויישור אלמנטים בציר ה-Y האנכי

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

בכדי לשחק עם מיקום האלמנטים אנכית בציר ה-Y נשתמש בתכונה align-items, לעומת זאת בכדי ליישר אלמנט אופקית בציר ה-X נשתמש בתכונה justify-content.

1. התכונה align-items

התכונה align-items מאפשרת לנו לשלוט על מיקום אלמנטים לאורך ציר ה-Y האנכי. היא נראית כך:

.flex-container {
    align-items: stretch;
}

תנו מבט ב Flex Container הבא. האלמנטים נמתחים לגובה של הקונטיינר וזאת מכיוון שברירת המחדל של התכונה align-items היא stretch וזה נראה כך:

Flex Item
Flex Item
Flex Item

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


Flex Item
Flex Item
Flex Item

אם אתם מעוניינים לדעת על ההבדל בין flex-start ל baseline תנו מבט בקישור הבא

שימו לב שהקונטיינר גבוה יותר מהאלמנטים הנמצאים בו. כלומר בכדי שלתכונה align-items תהיה השפעה, על הקונטיינר להיות גבוה מהאלמנטים. לסיכום – באמצעות התכונה align-items אנו שולטים במיקום שורת אלמנטים בציר האנכי.

אך נאמר וקיימים מספר שורות של אלמנטים בקונטיינר מסויים ואנו מעוניינים לשלוט במיקום של אלו לאורך ציר ה-Y האנכי?

2. התכונה align-content

התכונה align-content דומה לתכונה align-items אך במקום להשפיע על מיקום האלמנטים עצמם היא משפיעה על מספר שורות של אלמנטים. התכונה נראית כך:

.flex-container {
    align-content : stretch;
}

ערך ברירת המחדל שלה הוא align-content : stretch והיא אינה רלוונטית במיוחד עבור שורת אלמטים אחת בלבד. תנו מבט בדוגמה הבאה ושחקו עם הערכים של התכונה בכדי להבין על מה אני מדבר:

1
2
3
4
5
6
7
8

גם במקרה זה בכדי שלתכונה align-content תהיה השפעה כלשהי על הקונטיינר להיות גבוה יותר מהשורות עצמן יחדיו.

בואו ניתן מבט כעת על כיצד למקם וליישר אלמנטים בציר ה-X האופקי….


מיקום ויישור אלמנטים בציר ה-X האופקי

1. התכונה justify-content

לאחר שראינו כיצד יישור אלמנטים עובד בציר האנכי, ניתן מבט על ציר ה-X האופקי. בציר זה קיימת עבורינו תכונה אחת בלבד הנקראית justify-content.

.flex-wrapper {
    justify-content: flex-start;
}

ב Flex Container אלמנטים מסתדרים בשורה בתחילת ציר ה-X מכיוון וערך ברירת המחדל של התכונה הוא flex-start. התכונה justify-content מאפשרת לשלוט על מיקום האלמנטים בציר זה ומכאן לשחק עם הריווח שלהם.

שחקו עם האפשרויות הקיימות עבור התכונה  justify-content בדוגמה הבאה וראו השפעתה על מיקום האלמנטים:


1
2
3

לא קיימת עבורינו התכונה justify-items ב Flexbox (עוד על כך בהמשך) ובזאת סיימנו את נושא מיקום האלמנטים בצירים. לפני שנעבור לתכונות של אלמנטים אינדיבידואלים בואו ניתן מבט בתכונה נוספת ברמת הקונטיינר בשם flex-wrap


התכונה flex-wrap

התכונה flex-wrap קובעת האם נכריח ילדים של קונטיינר מסוג Flex (כלומר Flex Items) להשאר בשורה אחת או שבאפשרותם ללתפוס שורות מרובות.

כברירת מחדך Flex Items לא ירדו לשורה חדשה אם אין להם מקום (nowarp) כך שאם האלמנטים תופסים מקום רב יותר מהמקום הפנוי תתבצע ״גלישה״, אם אתם מבינים CSS אז כוונתי ל overflow. ניתן לסדר זאת על ידי התכונה flex-wrap.

שימו לב כי בדוגמה הבאה שלושת האלמנטים הם בעלי width : 50%, אך רוחב זה לא יבוא לידי ביטוי כאשר התכונה flex-wrap : wrap או לחילופין, flex-wrap : wrap-reverse לא קיימות.

הדוגמה הבאה ממחישה את הנושא:

1
2
3


תכונות של אלמנט (Flex Item) אינדיבידואלי

עד כה נגענו בתכונות המתייחסות לקונטיינר עצמו (ל Flex Container) אך Flexbox מאפשרת לנו גם לשלוט במיקום ובהתנהגות של אלמנט אינדיבידואלי בתוך הקונטיינר:

1. התכונה align-self

align-self מאפשרת לשנות מיקום של אלמנט ספציפי בתוך הקונטיינר. היא מאפשרת לנו לשבור את ההגדרה הדיפולטיבית של align-items עבור אלמנט ספציפי בקונטיינר.

align-items,שתיארנו בהתחלה קובעת בעצם את התכונה align-self על כל האלמנטים בקונטיינר.

אך בכדי להמחיש זאת תנו ב CSS מטה בו הקונטיינר הוא בעל התכונה align-items : start כך שכל האלמנטים יתמקמו (כביכול) אחד אחר השני בתחילת ציר ה-Y.

כביכול מכיוון ובדוגמה זו קבענו כי האלמנט הראשון יהיה בעל התכונה align-self : stretch והאלמנט השלישי יהיה בעל התכונה align-self : center השוברים את החוקיות של הקונטיינר עצמו:

.flex-wrapper {
    align-items: flex-start;
    display: flex;
}

.flex-wrapper > div:nth-child(1) {
    align-self: stretch;
}

.flex-wrapper > div:nth-child(3) {
    align-self: center;
}

התוצאה תהיה משהו בסגנון הזה:

1
2
3
4
5

שחקו עם התכונה align-self של האלמנט הראשון בכדי להבין השפעתה:

1
2
3

2. התכונה flex-grow

באמצעות התכונהflex-grow ניתן לשלוט על כמות השטח שאלמנט ספציפי יתפוס יחסית לאחרים. תכונה זו מקבלת ערך נומרי המייצג שבר (fraction) מהשטח הפנוי הקיים כאשר ערך זה תלוי בערך הקיים של אותה תכונה באלמנטים האחרים הנמצאים בקונטיינר.

ערך ברירת המחדל הוא 0 וקובע כי האלמנט לא יתפרס על השטח הריק אם קיים. בדוגמה הבאה האלמנט הראשון הוא בעל הערך הדיפולטיבי, האלמנט השני עם הערך 1 והאלמנט השלישי עם הערך 2:

1
2
3

אגב, מכיוון והערך הוא יחסי, אם תגדירו את התכונה flex-grow: 200 לכלל האלמנטים יהיה זה בדיוק כאילו קבעתם את הערך של  בכולם ל-1, מקווה שזה מובן…

 תנו מבט בטריק נחמד המאפשר להצמיד אלמנטים לתחתית של Flex Container באמצעות התכונה flex-grow.

3. התכונה flex-shrink

התכונה flex-shrink היא ההפך של flex-grow ומגדירה את אפשרויות הכיווץ של אלמנט ביחס לאחרים בקונטיינר. הערך הדיפולטיבי הוא 0 ומשמעותו שהאלמנטים יכולים להתכווץ.

4. התכונה flex-basis

התכונה flex-basis מגדירה את השטח ההתחלתי אותו יתפוס אלמנט, אך היא אינה מחייבת ותלויה בשטח הפנוי שקיים. תנו nבט בשתי הדוגמאות הבאות:

בראשונה לכל האלמנטים קיימת התכונה flex-basis : 25%:

25%
25%
25%

בשנייה האלמנט הראשון יהיה בעל התכונה flex-basis : 55% והשניים האחרים בעלי התכונה flex-basis : 15%:

55%
15%
15%

לא נרחיב כרגע מעבר לכך על תכונה זו….

5. התכונה flex

התכונה flex היא מעין קיצור וקומבינציה של התכונות flex-grow, flex-shrink ו flex-basis. לדוגמה, הנה הסינטקס לאלמנט בעל הערך flex-grow : 2, בעל הערך flex-shrink : 0 ובעל הערך flex-basis : 2rem:

.item {
  flex: 2 0 2rem;
}

הפיכת הצירים – התכונה flex-direction

Flexbox מאפשרת לנו להפוך את הציר ה-X וציר ה-Y. align-items אותה תיארנו קודם שולטת במיקום האלמנטים בציר האנכי, אך זאת מפאת תכונת ברירת המחדל ל Flexbox קונטיינר והיא flex-direction: row. תנו מבט בקוד הבא:

.flex-container {
    display: flex;
    flex-direction: row; /* default value */
    align-items: flex-start; /* default value */
}

.flex-container > div:nth-child(1) {
    align-self: flex-start;
}

.flex-container > div:nth-child(2) {
    align-self: center;
}

.flex-container > div:nth-child(3) {
    align-self: flex-end;
}

flex-start
center
flex-end

לעומת זאת, כאשר קיימת התכונה flex-direction: column התכונה align-items (המוגדרת כ flex-start דיפולטיבית) תשלוט באלמנטים בציר האופקי:

flex-start
center
flex-end

באותה מידה – אם קיימת התכונה flex-direction : column, אז התכונה justify-content תקבע את המיקום לאורך ציר ה Y.

וזאת כל עוד הקונטיינר גבוה יותר מהאלמנטים עצמם יחדיו כמובן.

קביעת כיווניות האלמנטים

אז ראינו כי התכונה flex-direction מגדירה לאיזה ציר נתייחס כציר הראשי. אך באמצעותה ניתן גם לקבוע את כיווניות של אלמנטים (רגילה או הפוכה). שחקו עם האפשרויות של תכונה זו:

1
2
3

נזכיר ונאמר כי התכונה flex-direction מושפעת מכיווניות האתר (RTL or LTR).


כיצד למרכז אלמנט ב Flex Container

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

.flex-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="flex-wrapper">
     <div class="grid-item">1</div>
</div>

אם לאלמנט גובה ורוחב מוגדרים וקבועים (60px בדוגמה זו), התוצאה תהיה אלמנט ממורכז בקונטיינר:

1

שימוש ב auto margins ליישור אלמנטים

לא קיימת עבורינו התכונה justify-items או justify-self עבור ציר ה-X ועלינו להתייחס לאלמנטים כקבוצה בציר זה. עם זאת, ניתן להפריד אלמנט או קבוצת אלמנטים מאחרים באמצעות שימוש ב auto margins.

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

.flex-wrapper {
    display: flex;
}

.flex-wrapper > div:nth-child(4) {
    margin-right: auto;
}

1
2
3
4
5

הדבר היחיד שביצענו הוא הוספת margin-right : auto לאלמנט מספר 4 הדוחף אלמנט זה ואת אלו שאחריו לקצה השמאלי של הציר הראשי (הציר האופקי במקרה זה).


עימודים נפוצים ב Flexbox עם דוגמאות קוד

תיאורטית, השימוש ב Flexbox הוא פשוט ונוח לבניית עימודים, בין אם מורכבים ובין אם כאלו פחות מורכבים.

עם זאת אני מוצא את עצמי לא פעם מוסיף את התכונה display : flex לאלמנט מסויים ואחר כך מבזבז לא מעט זמן בכדי להבין כיצד לגרום לאותו Flexbox Container להתנהג כפי שאני רוצה.

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

כל אחת מהדוגמאות בפוסט זה מניחה כי ה HTML מכיל אלמנט עם הקלאס container ובתוכו מספר ילדים בעלי הקלאס item (מספר הילדים משתנה כמובן בין דוגמה לדוגמה). אם לא מובן משהו הרגישו חופשי לשאול בתגובות.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

1. Stretch all, fixed spacing

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  height: 100px;
}

.item + .item {
  margin-right: 2%;
}

2. Stretch middle, fixed spacing

.container {
  display: flex;
}

.item {
  height: 100px;
  width: 100px; /* A fixed width as the default */
}

.item-center { 
  flex-grow: 1; /* Set the middle element to grow and stretch */
}

.item + .item { 
  margin-right: 2%; 
}

3. Alternating גריד

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 48%;
  height: 100px;
  margin-bottom: 2%;
}

.item:nth-child(3n) {
  width: 100%;
}

4. גריד 3×3

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 0 32%;
  height: 100px;
  margin-bottom: 2%; /* (100-32*3)/2 */
}

5. גריד 3*3:    constrained proportions | 1:1

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 32%; /* Same as width, sets height */
  margin-bottom: 2%; /* (100-32*3)/2 */
  position: relative;
}

6. גריד 3*3:    constrained proportions | 16:9

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  width: 32%;
  padding-bottom: 18%; /* 32:18, i.e. 16:9 */
  margin-bottom: 2%; /* (100-32*3)/2 */
}

7. גרף: Vertical Bars

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  align-items: flex-end;
}

.item { width: 14%; }
.item-1 { height: 40%; }
.item-2 { height: 50%; }
.item-3 { height: 60%; }
.item-4 { height: 20%; }
.item-5 { height: 30%; }

8. גרף: Horizontal Bars

.container {
  display: flex;
  height: 300px;
  justify-content: space-between;
  flex-direction: column;
}

.item { height: 14%; }
.item-1 { width: 40%; }
.item-2 { width: 50%; }
.item-3 { width: 60%; }
.item-4 { width: 20%; }
.item-5 { width: 30%; }

נספח – התכונה place-items ו place-content

קיימות אגב תכונות מקוצרות לאלו. התכונה place-items מקבילה לשימוש יחד בו place-content:

.flex-wrapper {
  display: flex;
  place-content: center center;
}


.flex-wrapper {
  display: flex;
  place-items: center center;
}

התכונה place-content היא קומבינציה של התכונות align-content ו justify-content ומאפשרת לכתוב שתי אלו בהגדרה דקלרטיבית אחת. כנ״ל לגבי התכונה place-items שהיא קיצור לתכונות align-items ו justify-items.

רגע, אבל אמרנו שלא קיימת התכונה justify-items ב Flexbox….??

אני עדיין מאחורי הטענה. התכונה justify-items היא אינה חלק מהספסיפקציות של Flexbox והשימוש בה לא יוביל לכלום עם השימוש ב Flexbox Container.

התכונה אם אינכם יודעים מגדירה את התכונה justify-self על קבוצת אלמנטים בקונטיינר מסויים והאפקט של זו משתנה בהתאם למתווה (layout) בו אתם משתמשים (block elements, tables וכדומה…). ב Flexbox התכונה לא תבצע מאום…

לא נתעכב על כך והאמת שקצת לא ברור מדוע קיימת התכונה place-items וזאת כאשר justify-items אינה בספסיפיקציות של Flex ואינה רלוונטית… יש לכם רעיון מדוע? שתפו בתגובות…

לסיכום

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

צפו כי בעתיד נוכל להשתמש בעוד תכונות הקיימות ב Box Alignment Level 3 עבור Flex. אני מניח שנוכל להשתמש בתכונות column-gap ו row-gap הקיימות ב CSS Grid Layout

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

רועי יוסף
רועי יוסף

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

9תגובות...
  • בן 29 באפריל 2019, 18:05

    למרות שאני מודע לפלקס בוקס אהבתי לקרוא.

  • אלעד סרוסי 29 באפריל 2019, 18:20

    קודם כל אחלה פוסט תודה רבה! אשמח לדעת איך היית עושה כמו בדוגמא שנתת לגבי space-between רק לגבי שני items כאשר הראשון בהתחלה והשני באמצע. שוב תודה.

    • רועי יוסף 29 באפריל 2019, 18:37

      שמח שאהבת אלעד 🙂

      שאלתך מתייחסת לחלק האחרון של הפוסט. אתה צריך לעשות שימוש ב auto margins:

      <div class="flex-wrapper">
         <div>1</div>
         <div>2</div>
      </div>
      .flex-wrapper {
          display: flex;
      }
      
      .flex-wrapper > div:nth-child(2) {
          margin-right: auto;
          margin-left: auto;
      }

      אבל האלמנט במקרה זה יהיה ממורכז בשטח הריק ולא לרוחב הקונטיינר המלא. אז הפתרון יהיה באמצעות CSS Grid. תן מבט בדוגמה הבאה ב Codepen.

  • אליהו 17 ביוני 2019, 10:26

    יפה מאוד, אחלה פוסט תודה על ההשקעה 🙂

  • מרים ברנס 28 בנובמבר 2019, 17:46

    תודה על כל הפוסטים המושקעים. אני קוראת מושבעת שלהם. שאלה קטנה:

    האם ניתן לסדר אלמנטים על ציר ה-Y כמו טורים, שכאשר הטור הראשון מתמלא – התוכן עובר לטור הבא בתור? (משהו כמו flex-wrap על ציר ה-Y כאשר גובה ה DIV העוטף קבוע.)

    • רועי יוסף 28 בנובמבר 2019, 18:28

      היי מרים, שאלה מעניינת… אם אני מבין נכון את השאלה אז בהחלט ניתן עם flex-direction : column, אך כמובן שעלייך לקבוע גובה קבוע לקונטיינר בכדי שהאלמנטים יעברו לטור הבא כשכבר לא יהיה מקום וריטיקלי לעוד אלמנט:

      <div class="flex-alignment">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
          <div>10</div>
          <div>11</div>
          <div>12</div>
      </div>
      .flex-alignment {
          border: 1px solid #eee;
          display: flex;
          height: 300px;
          width: 300px;
          flex-direction: column;
          flex-wrap: wrap;
      }
      
      .flex-alignment > * {
          background: #ccd562;
          color: white;
          font-size: 20px;
          font-weight: 900;
          min-width: 60px;
          min-height: 60px;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          display: flex;
      }
      
      .flex-alignment > *:nth-child(odd) {
          background: #fbdd40;
      }

      הנה דוגמה חיה ב Codepen:

      https://codepen.io/roeey/pen/oNNKabw

      • מרים ברנס 28 בנובמבר 2019, 20:09

        תודה על התשובה המהירה.
        ענה לי בדיוק על הצרכים.

השאירו תגובה

Up!