פלקסבוק נוסף ב CSS3 תומך בכל הדפדפנים וב ie רק מגירסה 11.
flex הפך להיות מאוד פופולארי בקרב מפתחים מכיוון שהוא מאפשר לנו לסדר אלמנטים בצורה יותר קלה ונוחה.
flex הוא בעצם תוספת ל inline ו block הידועים ( ישנם עוד table,inline-block …. ) ולכן לפעמים שממגדירים display ל flex הוא קצת מאבד מהצורה שלו.
כל מה שאפשר לעשות ע"י flex אפשר לעשות גם בלעדיו , אבל הוא מאפשר צורה נוחה יותר לעשות דברים. אתר שממחיש את כל מה שאפשר לעשות בפלקס בסטיילים אחרים קישור לאתר
אז נתחיל:
display: flex;
מאפיינים שניתן להוסיף ל flex
- display
- order
- flex-direction
- flex-grow
- flex-wrap
- flex-shrink
- flex-basis
- flex-flow
- justify-content
- align-self
- align-items
- align-content
מאפיין ראשון display
כאן אנחנו מתחילים להגדיר לדפדפן שבעצם אנחנו מתחילים להשתמש ב flex ונוכל להשתמש בכל המאפיינים שלו, זהו תנאי הכרחי להשתמש במאפיינים של הפלאקס.
ניתן להזין למאפיין זה
display:flax
או
display:inline-flex
מאפיין שני order
.item {
order: <integer>;
}
מאפיין זה הוא מאפיין שמתייחס לילדים של האייטם הראשי כלומר לאייטמים. הוא קובע איך תסודר התצוגה שלהם ללא קשר למיקום שלהם
אנו מספקים מספר שלם לכל אייטם שקובע מה המיקום שלו ביחס לאחרים ככל שהמספר קטן יותר הוא יהיה יותר למעלה
מקבל מספר שלם וכאשר המספר שאנחנו מספקים זהה אז המיקום נקבע לפי המיקום המקורי שהיה אמור להיות.
המספר השלם מתחיל מ 0.
דוגמא:
See the Pen Demo Flexbox 2 by Hugo Giraudel (@HugoGiraudel) on CodePen.
מאפיין שלישי flex-direction
תכונה זו קובעת את הכיוון של האייטמים ב flex תכונה זו ניתנת לאייטם שעוטף. הכיוונים האפשרים הם בשורה בעמודה שורה בכיוון הפוך ועמודה בכיוון הפוך. מאוד מזכיר את ה direction:rtl\ltr רק שכאן יש לנו עוד תוספות וגם זה עטוף כבר גם באפשרות של עמודה או שורה.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
מאפיין רביעי flex-grow
See the Pen Demo Flexbox 2 by Hugo Giraudel (@HugoGiraudel) on CodePen.
קישור למדריך נחמד ויזואלי של flex
https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.re4263e6e
🙂