בפרק הקודם של המדריך הבסיסי ל-CSS ב-HTML סידרנו את דף האינטרנט שלנו בתצורת רשת. בפרק זה נלמד לארגן פריטים בתיבת Flexbox
בזמנים עברו, לפני הופעת ה-flexbox היו 4 סוגי layout ב-CSS:
- Block – עבור סימון קטע באתר
- Inline – לטקסט
- Table – לטבלאות
- Positioned – למיקום חריג של אלמנט
ה-Flexbox, אשר שמה נגזר מ-Flexible Box,
מקלה עלינו בעיצוב מבניות של אתר ללא צורך ב-float או positioned.
יצירת התיבה (container)
ראשית ניצור תיבה (container) בדף HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Flex Container</h1>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
תיבה זו אשר מכילה 3 פריטים, נראית כרגע אנמית.
בואו נראה מה ה-flexbox יכול לעשות עבורנו.
קובץ ה-CSS
צרו קובץ CSS והזינו את הקוד הבא:
.flex-container {
display: flex;
background-color: rgb(211, 188, 112);
width: 50%;
}
.flex-container > div {
background-color: aliceblue;
margin: 10px;
padding: 20px;
font-size: 30px;
}
- על מנת שהתיבה שייצרנו תוגדר כ-container עלינו לתת את הערך-flex לתכונה display (שורה 2).
- על מנת לעצב את הפריטים שייצרנו השתמשנו בסלקטור המיוחד <.
כלומר שכל האלמנטים אשר עונים לתגית-div שבתוך ה-flex-container ייבחרו.
כעת דף האינטרנט שלנו נראה כך:
המאפיין flex-direction
במאפיין flex-direction נוכל להשתמש על מנת לקבוע את כיוון היישור של פריטי התיבה.
נניח ונרצה לאחסן את הפריטים במאונך.
נכתוב כך את קוד ה-CSS שלנו:
.flex-container {
display: flex;
flex-direction: column;
background-color: rgb(211, 188, 112);
width: 50%;
}
.flex-container > div {
background-color: aliceblue;
width: 100px;
margin: 10px;
font-size: 30px;
text-align: center;
line-height: 75px;
}
- בשורה 3 הגדרנו את כיוון מיקום הפריטים בתיבה באמצעות המאפיין flex-direction.
- שימו לב שעל מנת שהפריטים לא ימשיכו עד סוף התיבה, הגבלנו להם את הרוחב ל-100px (שורה 10).
- לו היינו נותנים למאפיין flex-direction את הערך – column-reverse, הפריטים היו מסודרים הפוך – מלמטה למעלה.
- לו היינו נותנים למאפיין flex-direction את הערך – row, הפריטים היו מסודרים בצורה מאוזנת משמאל לימין.
- לו היינו נותנים למאפיין flex-direction את הערך – row-reverse, הפריטים היו מסודרים הפוך – בצורה מאוזנת מימין לשמאל.
המאפיין flex-wrap
במאפיין זה נשתמש על מנת "לעטוף" את הפריטים.
כלומר שאם היו לנו 14 פריטים, אז בוודאי שלא היו נכנסים בשורה אחת בתיבה שלנו.
כשהם היו מגיעים לסוף השורה – היו ממשיכים לשורה הבאה.
הוסיפו פריטים לתיבה שלכם ואת קובץ ה-CSS שלכם כתבו כך:
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: rgb(211, 188, 112);
width: 50%;
}
.flex-container > div {
background-color: aliceblue;
width: 100px;
margin: 10px;
font-size: 30px;
text-align: center;
line-height: 75px;
}
הדבר היחידי ששינינו זה שבשורה 3 שלפני כן היה בה מאפיין יישור פריטים,
הוחלפה במאפיין flex-wrap אשר מקבל את הערך – wrap.
והתוצאה בהתאם:
- אם נרצה נוכל לתת את הערך wrap-reverse כדי להפוך את הסדר.
- במאפיין –flex-flow נוכל להשתמש על מנת ליישם גם wrap וגם direction בפקודה אחת.
לדוגמא – ;flex-flow: row wrap
המאפיין justify-content
במאפיין זה נוכל להשתמש על מנת ליישר את הפריטים לרוחב יחסית לתיבה.
לדוגמא – למרכז אותם:
justify-content: center;
- נוכל לתת את הערך flex-end על מנת שהפריטים יוצמדו לצד הנגדי (ימין)
- נוכל לתת את הערך space-around על מנת שהפריטים יסודרו בצורה המרווחת ביותר שניתן להגיע אליה בקונטיינר יחסית לגודל הפריטים.
- כמו space-around רק שעובד כך שנוצר רווח גם בין השורות ככל הניתן.
המאפיין align-items
במאפיין align-items נוכל להשתמש על מנת ליישר את הפריטים לגובה יחסית לתיבה.
כלומר שאם היינו רוצים שהפריטים יהיו מיושרים למעלה,
היינו יכולים להוסיף את פקודת ה-CSS הבאה:
justify-content: center;
שימו לב כי בקובץ ה-HTML שינינו את כמות הפריטים ל-6,
ובקובץ ה-CSS הגדרנו גובה לתיבה(;height: 200px) על מנת שנוכל להבין את ההשפעה של align-items על הפריטים.
- בערך center נשתמש על מנת ליישר את הפריטים למרכז גובה התיבה.
- נוכל לתת את הערך flex-end על מנת ליישר את הפריטים לתחתית התיבה.
- אם נרצה נוכל לתת את הערך stretch על מנת למתוח את הפריטים לאורך התיבה:
- או לתת את הערך baseline על מנת לתת לפריטים גודל יחסי לתכולה שלהם.
נסו לשנות את גודל הפונט של הפריטים השונים בקובץ ה-HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="my_style.css">
<meta charset="utf-8" />
<title>Hello, World!</title>
<h1 class="h1_class" style="text-shadow:0 0 5px #0000FF;">this is an example of our basic HTML Document with Flex Container</h1>
</head>
<body>
<div class="flex-container">
<div><h1>1</h1></div>
<div><h5>2</h5></div>
<div><h3>3</h3></div>
<div><p>4</p></div>
<div><h4>5</h4></div>
<div><h2>6</h2></div>
</div>
</body>
</html>
כעת תוכלו לקבל תוצאה כזו:
המאפיין align-content
המאפיין align-content נועד ליישר שורות ביחס לתיבה.
כלומר שאם נרצה נוכל לשלוט בריווח שבין השורות.
לדוגמא, אם נרצה נוכל להרחיק אותם:
align-content: space-between;
שימו לב כי הגדלנו את הגובה של התיבה ל-400px על מנת שהשינויים יהיו מורגשים.
- בערך space-around נשתמש כדי ליצור רווח מעל מתחת ובין השורות.
- stretch מותח את הפריטים עד למקסימום שניתן ללא התנגשויות כולל רווח קטן (באופן דיפולטיבי)
- נוכל להשתמש ב-center על מנת למרכז את השורות
- flex-start יצמיד את השורות למעלה.
- flex-end יצמיד את השורות לתחתית התיבה.
מרכוז מושלם באמצעות Flexbox
ב-Flexbox ניתן גם להשתמש על מנת למרכז בצורה מושלמת פריט (בעיה נפוצה ב-HTML).
נוכל לתת את הערך center למאפיינים justify-content ו-align-items:
בפרק הבא של המדריך נלמד על פונקציות מובנות ב-CSS.
לקריאה נוספת על CSS יש ללחוץ כאן
