המדריך הבסיסי ל-CSS ב-HTML – פרק ז' – Flexbox Layout

בפרק הקודם של המדריך הבסיסי ל-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 exemple 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 ייבחרו.

 

כעת דף האינטרנט שלנו נראה כך:

CSS in HTML - Flexbox
CSS in HTML – Flexbox

המאפיין 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.
והתוצאה בהתאם:

CSS in HTML - Flexbox wrap
CSS in HTML – Flexbox wrap
  • אם נרצה נוכל לתת את הערך wrap-reverse כדי להפוך את הסדר.
  • במאפיין –flex-flow נוכל להשתמש על מנת ליישם גם wrap וגם direction בפקודה אחת.
    לדוגמא – ;flex-flow: row wrap 

 

המאפיין justify-content

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

justify-content: center;
CSS in HTML - Flexbox justify-content
CSS in HTML – Flexbox justify-content
  • נוכל לתת את הערך flex-end על מנת שהפריטים יוצמדו לצד הנגדי (ימין)
  • נוכל לתת את הערך space-around על מנת שהפריטים יסודרו בצורה המרווחת ביותר שניתן להגיע אליה בקונטיינר יחסית לגודל הפריטים.
  • כמו space-around רק שעובד כך שנוצר רווח גם בין השורות ככל הניתן.

 

המאפיין align-items

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

justify-content: center;
CSS in HTML - Flexbox align-items
CSS in HTML – Flexbox align-items

שימו לב כי בקובץ ה-HTML שינינו את כמות הפריטים ל-6,
ובקובץ ה-CSS הגדרנו גובה לתיבה(;height: 200px) על מנת שנוכל להבין את ההשפעה של align-items על הפריטים.

  • בערך center נשתמש על מנת ליישר את הפריטים למרכז גובה התיבה.
  • נוכל לתת את הערך flex-end על מנת ליישר את הפריטים לתחתית התיבה.

 

  • אם נרצה נוכל לתת את הערך stretch על מנת למתוח את הפריטים לאורך התיבה:

 

CSS in HTML - Flexbox stretch
CSS in HTML – Flexbox 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 exemple 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>

כעת תוכלו לקבל תוצאה כזו:

CSS in HTML - Flexbox baseline
CSS in HTML – Flexbox baseline

המאפיין align-content

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

align-content: space-between;
CSS in HTML - Flexbox align-content
CSS in HTML – Flexbox align-content

שימו לב כי הגדלנו את הגובה של התיבה ל-400px על מנת שהשינויים יהיו מורגשים.

  • בערך space-around נשתמש כדי ליצור רווח מעל מתחת ובין השורות.
  • stretch מותח את הפריטים עד למקסימום שניתן ללא התנגשויות כולל רווח קטן (באופן דיפולטיבי)
  • נוכל להשתמש ב-center על מנת למרכז את השורות
  • flex-start יצמיד את השורות למעלה.
  • flex-end יצמיד את השורות לתחתית התיבה.

 

מרכוז מושלם באמצעות Flexbox

ב-Flexbox ניתן גם להשתמש על מנת למרכז בצורה מושלמת פריט (בעיה נפוצה ב-HTML).
נוכל לתת את הערך center למאפיינים justify-content ו-align-items:

CSS in HTML - Flexbox perfect centering
CSS in HTML – Flexbox perfect centering

בפרק הבא של המדריך נלמד על פונקציות מובנות ב-CSS.
לקריאה נוספת על CSS יש ללחוץ כאן

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה?

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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