Menu
Coddy logo textTech

flex-direction

שיעור 4 מתוך 15 בקורס CSS Flexbox - הקורס המלא של Coddy.

המאפיין flex-direction מגדיר את הכיוון של פריטי ה-flex.

הוא מקבל ארבעה ערכים:

  • row - פריטי flex משמאל לימין.
  • row-reverse - פריטי flex מימין לשמאל.
  • column - פריטי flex מלמעלה למטה.
  • column-reverse - פריטי flex מלמטה למעלה.

ערך ברירת המחדל של מכל flex הוא row.

דוגמה,

.container {
  display: flex;
  flex-direction: row-reverse;
}
challenge icon

אתגר

קל

הגדר את הכיוון של תיבת ה־flex הנתונה ל־column-reverse.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div class="container">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </body>
</html>

כל השיעורים ביחידה CSS Flexbox - הקורס המלא

תרגלו בעצמכם: Web אונליין