נגישות       נגישות
שינוי גודל טקסט:
א א א
שינוי צבעי האתר:
? מקשי קיצור:

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

הפעלת מקשי הקיצור תלויה בדפדפן שבו אתם משתמשים.

Internet Explorer, Chrome ובגרסאות ישנות של Firefox: לחצו על מקש Alt ועל מקש המספר או האות על-פי הרשימה. ב Firefox 3 ומעלה: לחצו על המקשים Alt + Shift + המספר או האות.

S - עבור לתוכן הדף
L - חיפוש
1- עמוד הבית
2 - פרוייקטים
3 - מדריכים
4 - אודות
5 - צרו קשר
6 - הצהרת נגישות
 

CSS3 - מודל התיבה הגמישה flex box model

מחבר:
בתאריך:

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

• הצורך למקם אלמנטים זה לצד זה בקלות,

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

בעוד בתקן CSS2 היינו צריכים להשתמש בהצפת אלמנטים (float) כדי לסדר אלמנטים ועמודות האחד לצד השני, בתקן CSS3 נוכל להשתמש בתכונה חדישה ומתקדמת box-orient-, שהיא ידידותית בהרבה למטרה זו. בנוסף, נוכל להשתמש בתכונת box-flex- כדי להתאים ביתר קלות את גודלם של אלמנטים בדף לגודלו של ההתקן שבו אנחנו משתמשים. 

שימו לב! המדריך נכתב ב-2012, והתקנים ל-CSS3 הם עדיין ניסיוניים. לפיכך, המדריך נכתב עבור הדפדפנים Chrome  ו-Safari שמשתמשים בהרחבת webkit. במידה ורוצים לכתוב קוד לדפדפן Mozilla, מחליפים את המילה webkit ב-moz. אפשר לראות טבלה שמרכזת את כל הפקודות עבור דפדפנים אילה בתחתית הדף.

 

כדי לעבוד עם תכונות התיבה של CSS3

כדי להתחיל לעבוד עם ערכת התיבה (webkit-box-) שמציע לנו Chrome אנחנו חייבים לעשות את שני הדברים הבאים:

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

<div id="wrapper">
    <p class="column">עמודה ראשונה</p>
    <p class="column">עמודה שנייה</p>
    <p class="column">עמודה שלישית</p>
 </div>

ברמת ה-CSS, נגדיר בתוך האלמנט האב רוחב באמצעות width או max-width ולתכונה display ניתן ערך webkit-box-. זה ייראה כך:

#wrapper {
  width: 100%;
  display: -webkit-box;
}

 

סידור אלמנטים זה לצד זה

כשנריץ את הקוד בדפדפן, נראה שהפסקאות ממוקמות אחת מעל השנייה מפני שזו ברירת המחדל. אבל אם נרצה למקם את הפסקאות אחת לצד השנייה, נוכל להשתמש בתכונה webkit-box-orient עם הערך horizontal. כדי לעבוד עם box-webkit עלינו לציין בתוך האלמנט האב ;display:-webkit-box קוד ה-CSS ייראה כך:

#wrapper {
  border: 1px solid black;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}

נשים לב, שהוספנו webkit לאלמנט האב wrapper, ולא לילדים (column). התוצאה שהעמודות מסודרות אחת לצד השנייה, כפי שניתן לראות בתמונה:

סידור אלמנטים זה בצד זה באמצעות CSS3

הערכים ש webkit-box-orient- יכול לקבל הם: horizontal לסידור האלמנטים זה לצד זה או vertical לסידור האלמנטים האחד מעל לשני.

 

מרכוז האלמנטים בדף

אלמנטים של CSS ניתן למרכז לרוחב הדף (באופן הוריזוטלי) ולגובה הדף (באופן ורטיקלי). כדי למרכז צריך להכיר שתי תכונות:

webkit-box-pack שמיישר את האלמנט לפי הציר שקבענו באמצעות webkit-box-orient-.

• webkit-box-align שמיישר את האלמנט בציר השני. אם קבענו שה-box-orient יהיה horizontal, אז קובע את היישור בציר הורטיקלי, ולהפך.

בדוגמה, מיקמנו את האלמנטים זה לצד זה באופן הוריזונטלי, ולכן כדי למרכז לרוחב הדף נשתמש ב- webkit-box-pack, וכדי למרכז לגובה הדף נשתמש ב- webkit-box-align.

 

מרכוז לרוחב הדף

בגלל שהגדרתי שהאלמנטים יישבו לרוחב הדף, כדי למרכז לרוחב הדף משתמשים בתכונה webkit-box-pack עם הערך center. את התכונה הזו מוסיפים לאלמנט שעוטף את העמודות, wrapper. הקוד ייראה כך:

#wrapper {
  width: 100%;
  border: 1px solid black;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}

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

 

מרכוז אלמנטים CSS3

webkit-box-pack יכול למרכז את האלמנטים אם הוא מקבל את הערך center. בנוסף, אם יקבל את הערך end ידביק את האלמנטים לצד השמאלי של האלמנט האב, ואם יקבל את הערך start, ידביק את האלמנטים לצד הימני.

כמובן, שאם היינו ממקמים את האלמנטים אחד מעל לשני ולא אחד לצד השני, start היה מדביק את האלמנטים במעלה הדף, ו-end היה מדביק את האלמנטים בתחתית הדף.

 

מרכוז לאורך הדף

נאמר שגובהו של האלמנט האב הוא 250 פיקסלים ושל הילדים רק 150 פיקסלים. במצב זה איך נוכל למרכז את האלמנטים לאורכו של הדף? בגלל שהאלמנטים מסודרים לרוחב הדף, נשתמש בתכונה webkit-box-align, ובערך center. נראה את הקוד:

#wrapper {
  border: 1px solid black;
  height: 250px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
  height: 150px;
}

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

 

יישור אלמנטים לגובה הדף באמצעות CSS3

כפי ש-webkit-box-align יכול למקם אלמנטים במרכז הדף כשמשתמשים בערך center, הוא גם יכול, למקם אלמנטים במעלה הדף כשמשתמשים בערך start, בתחתית הדף כשמשתמשים בערך end, ואפשר גם להשתמש בערך stretch שיימתח את האלמנט לכל גובהו של הדף.

באותה מידה, אם האלמנטים היו ממוקמים אחד מעל לשני אז center היה ממקם את האלמנטים במרכז לרוחב הדף, start היה ממקם את האלמנטים בימין, ו-end בשמאל.

 

מתיחת האלמנטים בלי חישובים באמצעות CSS3

נניח שאנחנו רוצים שהאלמנט המרכזי ייקח את כל השטח הפנוי לכל אורך הדף, וישאיר לעמודה הראשונה והשלישית את הצדדים. לשם כך, לא צריך חישובים מסובכים כי ב-CSS3, עומדת לרשותנו התכונה webkit-box-flex. לדוגמה, אם ברצוננו למתוח רק את העמודה השנייה, נשנה את קוד ה-HTML וניתן לעמודה class ייחודי. בדוגמה זו, נוסיף את המחלקה column_stretch. קוד ה-HTML ייראה כך:

<html>
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>    
<body>
<div id="wrapper">
<p class="column">עמודה ראשונה</p>
<p class="column_stretch">עמודה שנייה</p>
<p class="column">עמודה שלישית</p>
</div>
</body>
</html>

 

כדי למתוח את העמודה השנייה, נוסיף לקוד ה-CSS את השורות המודגשות הבאות עבור column_stretch. נשים לב במיוחד לשורה webkit-box-flex:1, שמורה לדפדפן למתוח את האלמנט לכל האורך, כך שלא יישאר "שטח לבן" מלבד שוליים. 

#wrapper {
  border: 1px solid black;
  height: 250px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}
.column_stretch {
  -webkit-box-flex: 1;
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}

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

מתיחת אלמנט באמצעות CSS3

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

#wrapper {
  border: 1px solid black;
  height: 250px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
 -webkit-box-flex: 1;
}
.column_stretch {
  -webkit-box-flex: 1;
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}

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

רוחב שווה לאלמנטים בדף באמצעות CSS3

אבל נאמר שאני רוצה שהעמודה האמצעית תהיה בדיוק רחבה פי-2.8 מכל עמודה אחרת. גם למקרה זה ניתן להשתמש בbox-flex. פשוט נקפיד שהעמודה האמצעית תקבל ערך box-flex של 2.8, והעמודות הצדדיות יקבלו ערך box-flex של 1. זה בדיוק מה שעושה הקוד הבא:

#wrapper {
  border: 1px solid black;
  height: 250px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  
}
.column {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
 -webkit-box-flex: 1;
}
.column_stretch {
  -webkit-box-flex: 2.8;
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
}

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

רוחב יחסי של אלמנטים באמצעות CSS3

נשים לב שbox-flex יכול לקבל כל ערך שלם או בשברים עשרוניים. ערך מיוחד ש box-flex יכול לקבל הוא ערך של אפס, ובמקרה כזה אנחנו צריכים לתת לאלמנט רוחב קבוע באמצעות התכונה width. קוד ה-CSS ייראה כך:

-webkit-box-flex: 0;
width: 200px;

 

שינוי סדר האלמנטים ללא מאמץ בעזרת CSS3

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

• קודם ניתן לכל עמודה שם מחלקה נפרד בקובץ ה-html

• אח"כ נשתמש בתכונה ordinal-group שתגדיר את המיקום של כל אלמנט משמאל לימין.

אלמנט שיקבל ערך ordinal-group של 1 יהיה הכי שמאלי, זה שיקבל ערך 2 יהיה ימני יותר, וכיו"ב.

נתחיל מלהכניס את השינויים בשמות המחלקה בקובץ ה-html:

<html>
<head> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>    
<body>
<div id="wrapper">
<p class="column_right">עמודה ראשונה</p>
<p class="column_stretch">עמודה שנייה</p>
<p class="column_left">עמודה שלישית</p>
</div>
</body>
</html>

 

בהמשך, נוסיף לכל עמודה ordinal-group בהתאם למיקום שבו אנחנו מעוניינים. לפיכך, קוד ה-CSS החדש ייראה כך:

#wrapper {
  border: 1px solid black;
  height: 250px;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: stretch;
  
}
.column_right {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
  -webkit-box-flex: 1;
  width: 200px;
  -webkit-box-ordinal-group:2;
}
.column_left {
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
  -webkit-box-flex: 1;
  width: 200px;
  -webkit-box-ordinal-group:1;
}
.column_stretch {
  -webkit-box-flex: 2.8;
  border: 1px solid black;
  background-color: yellow;
  padding: 10px;
  margin: 7px;
  -webkit-box-ordinal-group:3;
}

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

 

רוחב שווה לאלמנטים בדף באמצעות CSS3

אסיים בתכונה מאוד שימושית לאתרים דו-לשוניים שבהם עוברים בין השפה העברית שכתובה מימין לשמאל לשפה שכתובה משמאל לימין דוגמת אנגלית. במצב כזה, אנחנו יכולים להדרש להפוך את סדר העמודות. לשם כך, נוכל להשתמש בתכונה webkit-box-direction עם ערך של reverse או עם הערך ברירת המחדל normal.

-webkit-box-direction: reverse;
 
-webkit-box-direction: normal;

 

סיכום תכונות מודל התיבה הגמישה

מודל התיבה הגמישה של CSS3 הוא ניסיוני, ולכן צריך להתאים את התכונות לדפדפנים השונים.

משמעות ערכים IE Safari Chrome Mozilla
מאתחל אין אין ;display: -webkit-box ;display: -moz-box
מסדר אלמנטים לגובה או לרוחב horizontal | vertical אין :webkit-box-orient- :moz-box-orient-

0 - רוחב קבוע,

1- רוחב גמיש,

גדול מ-1 - רחב פי כמה מאלמנט שמוגדר כ-1

0, 1 או כל ערך גבוה מ-1 כולל עשרוני אין :webkit-box-flex- :moz-box-flex-
ממקם את האלמנט ביחס לציר שנקבע על ידי -box-orient start | end | center אין :webkit-box-pack- :moz-box-pack-
ממקם את האלמנט בציר ההפוך start | end | center | stretch אין :webkit-box-align- :moz-box-align-
סידור האלמנטים הילדים מימין לשמאל או מלמעלה normal | reverse אין :webkit-box-direction- :moz-box-direction-
מיקום האלמנט  מספר שלם אין :webkit-box-ordinal-group- :moz-box-ordinal-group-

 

במדריך הבא נלמד להוסיף תיבות עם פינות מעוגלות ללא עזרת פוטושופ, ורק בעזרת CSS3.

 

הוסף תגובה חדשה

 

= 7 + 4