1. Getting to Know Flexbox
By Elad Shechter
facebook.com/groups/css.masters.israel/
coderwall.com/elad2412
wmp.co.il

2. ? Flexbox ‫מה זה‬

3. ‫* ‪ Flexbox‬הינו סוג ‪ display‬חדש, המצטרף לרשימת ה‪-display‬ים‬
‫שהינכם מכירים.‬
‫לדוגמא: ‪....block,inline,inline-block‬‬
‫* שיטה חדשה ליצירת ‪layouts‬‬

4. ‫‪ ,flexbox‬למה זה טוב?‬
‫ גמישות בגדלים וחישוב קל של יחסי גדלים בין אלמנטים‬‫ סדר אלמנטים‬‫ יישור אלמנטים‬‫ לייאוטים‬‫- מרכוז אלמנטים‬
‫‪http://codepen.io/elad2412/pen/Hvmbq‬‬
‫‪http://codepen.io/elad2412/pen/IExeA‬‬
‫‪http://codepen.io/elad2412/pen/zJIwo‬‬

5. ...‫תמיכה דפדפנים - נרחיב בהמשך‬
from: http://www.environmentsforhumans.com/2013/css-summit/presentations/Williamson-CSSsummit2013-Flexbox.pdf

6. flexbox ‫היררכית‬
<div class=”flex-container”>
<div class=”box flex1”></div>
<div class=”box flex2”></div>
<div class=”box flex3”></div>
<div class=”box flex4”></div>
</div>
!‫כולם חייבים להיות בנים ישירים‬

7. ‫ על‬flexbox-‫הגדרות ה‬
container-‫ה‬

8. container ‫ ל‬flex ‫הגדרות‬
display:flex
.flex-container {
width:1000px; margin:0 auto;
/*display flex definition*/
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
}
.box{
border-radius: 3px;
border: 4px solid #999;
background: #E6E3D4;
font-size:20px; font-weight:bold;
padding:10px 0;
}
display:flex ‫איך ההגדרה של‬
?‫תשפיע לנו על התצוגה‬
http://codepen.io/elad2412/pen/hqHCD
display:flex ‫ככה נראה העיצוב לפני שהוספנו את ה‬

9. ‫לפני ואחרי הוספה של ‪ display:flex‬ל ‪container‬‬
‫לפני‬
‫אחרי‬

10. ‫מערכת הצירים של ‪flexbox‬‬

11. ‫הגדרת הציר הראשי‬
‫וההשפעה על האייטמים שבתוכו‬
flex-direction
.flex-container {
-webkit-flex-direction:row; /* row/column/column-reverse/row-reverse */
-ms-flex-direction:row;
flex-direction: row;
}
row
Live Example:
http://codepen.io/elad2412/pen/sIuEb
column

12. (‫הגדרת הציר הראשי)המשך‬
‫הפיכת סדר האייטמים‬
flex-direction: row-reverse/column-reverse
.flex-container {
flex-direction: row-reverse;
}
row
row-reverse
column
column-reverse

13. ‫התנהגיות שבירה וחריגה‬
flex-wrap
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap; /* nowrap / wrap / wrap-reverse*/
Row
wrap
nowrap
Column
wrap
nowrap
Live Example:
http://codepen.io/elad2412/pen/IwDry

14. (‫התנהגיות שבירה וחריגה)המשך‬
‫היפוך סדר השורות‬
flex-wrap:wrap-reverse
flex-wrap: wrap-reverse;
Row
wrap
wrap-reverse
Column
wrap
wrap-reverse
Live Example:
http://codepen.io/elad2412/pen/aliKr

15. flex-direction & flex-wrap ‫סינטקס מקוצר של‬
flex-flow
.flex-container {
flex-direction: row;
flex-wrap: wrap;
}
=
/*‫; /*סינטקס מקוצר‬
flex-flow: row wrap;

16. ‫התנהגות ה ‪ flex‬הטבעי‬
‫* אני לא יודע אם שמתם לב, אבל באופן טבעי הטורים או העמודות תופסים את כל הרוחב או‬
‫הגובה שלהם בתוך ה‪ ,container‬זה עוד לפני שנתנו הגדרת ‪ flex‬כלשהיא לאייטמים.‬
‫ ההגדרה הזאת מאפשרת לנו ליצור ‪ ,layouts‬בצורה קלה ונוחה.‬‫- ההגדרה הזאת ניתנת לשינוי‬
‫‪column‬‬
‫‪row‬‬

17. ‫ישור אלמנטים ציר ראשי‬
justify-content
-webkit-justify-content: flex-start;
-ms-flex-pack: start; /*start/end/center/distribute/justify */ http://realworldvalidator.com/css/module/Microsoft/-ms-flex-pack
justify-content: flex-start; /*flex-start/flex-end/center/space-around/space-between */
flex-flow: row wrap;
flex-start
flex-end
center
space-around
space-between
center
space-around
space-between
(flex:1 for the items)
flex-flow: column wrap;
flex-start
flex-end
http://codepen.io/elad2412/pen/duFvn
(flex:1 for the items)

18. ‫ישור אלמנטים ציר משני‬
align-items
-webkit-align-items:center;
-ms-flex-align:center; /*start/end/center/baseline/stretch*/ http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
align-items:center; /*flex-start/flex-end/center/baseline/stretch*/
flex-flow: row wrap;
flex-start
flex-end
center
baseline
center
baseline
stretch
flex-flow: column wrap;
flex-start
flex-end
http://codepen.io/elad2412/pen/jthvy
stretch

19. ‫אם לא התבלבלתם‬
‫עד עכשיו....אז‬
‫עכשיו זה הזמן‬

20. ‫ישור אייטמים במצב של מספר שורות‬
align-content
align-items ‫הגדרת‬
‫מאבדת רלונטיות‬
‫ברגע שמשתמשים ב‬
.align-content
-webkit-align-content:flex-start;
-ms-flex-line-pack:start; http://realworldvalidator.com/css/module/Microsoft/-ms-flex-line-pack
align-content:flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */
flex-flow: row wrap;
flex-start
flex-end
center
space-between
space-around
stretch
space-between
space-around
stretch
flex-flow: column wrap;
flex-start
flex-end
center
http://codepen.io/elad2412/pen/ADeuG

21. ‫התנהגויות של ‪ ,flexbox‬שלמדנו עד עכשיו‬
‫* כל ההגדרות על שדיברנו עד עכשיו היו על ה-‪ container‬עצמו בלבד.‬
‫* עקב הגדרת ה-‪ container‬שלנו כ ‪ ,flexbox‬האייטמים של ה-‪ container‬יתיישרו בשורה אחד, שזוהי ברירת‬
‫המחדל של האייטמים ב ‪ container‬של ‪.flexbox‬‬
‫* הגדרת ציר ראשי )ברירת מחדל הורזונטלי( - ‪.flex-direction: row/column‬‬
‫* במידה ונרצה שהם יתיישרו ביותר מעמודה או טור אחד נשנה את ההגדרה של ה-‪.flex-wrap‬‬
‫‪flex-wrap: wrap/nowrap‬‬
‫סדר אייטמים או שורות )‪(order‬‬
‫* ניתן לשנות את סדר השורות/עמודות ע"י שימוש ה ‪flex-wrap: wrap-reverse‬‬
‫* ניתן לשנות את סדר האייטמים ע"י שימוש ‪flex-direction: row-reverse/column-reverse‬‬
‫סדר זרימת האייטמים )‪(alignment‬‬
‫* יישור האייטמים לפי ציר ראשי וציר משני‬
‫דוגמאות:‬
‫ציר ראשי - ‪justify-content: flex-end‬‬
‫ציר משני - ‪align-items:center‬‬
‫* הגדרת ‪ - align-content‬התנהגות אייטמים במצב של מספר שורות.‬
‫- הגדרת ‪ align-items‬מאבדת רלונטיות ברגע שמשתמשים ב ‪.align-content‬‬

22. ‫התנהגויות של ‪ ,flexbox‬שלמדנו עד עכשיו )המשך(‬
‫התנהגות טבעית של אייטמים ‪) align-items:stretch‬ברירת מחדל(‬
‫* כאשר אנחנו בישור הורזונטלי הברירת מחדל הורטיקלית שלנו היא התרחבות ורטיקאלית.‬
‫* כאשר אנחנו בישור ורטיקאלי הברירת מחדל הורזנטלית שלנו היא התרחבות הורזנטאלית.‬
‫דוגמא:‬
‫* כל ורק הבנים הישירים של ה-‪ container‬שעליו הוגדר ה-‪ flexbox‬יושפעו ממנו. מה שאומר שהבנים של הבנים לא‬
‫מושפעים.‬
‫* הירכיית ‪ flexbox‬עובדת רק על בנים ישירים. אך זה לא אומר שבתוך הבן עצמו אי-אפשר יהיה ליצור ‪ container‬אשר‬
‫גם הוא יהיה ‪ flexbox‬עם בנים ישירים משלו.‬

23. ‫ על‬flexbox ‫הגדרות ה‬
items-‫ה‬

24. ‫הגדרות התנהגות לאייטמים בודדים‬
flex
flex:<flex-grow> <flex-shrink> <flex-basis>;
Initial value the concatenation of the initial values of its longhand properties:
● flex-grow: 0
● flex-shrink : 1
● flex-basis : auto
(behave like 0 , when you declare flex-grow, flex-basis initial to 0)

25. ‫הגדרות ‪)flex‬יחסים( לאייטמים‬
‫‪flex-grow‬‬
‫* הערך המספרי של ‪ flex-grow‬משקף את הגודל שלו ביחס לאחים שלו.‬
‫במידה וניתן ערך שווה מעל 0 כל האייטמים יהיו שווים בגודלם ויתפסו את כל גודלו של‬
‫ה‪ container‬בציר הראשי‬
‫‪row‬‬
‫{‪.box‬‬
‫;1:‪-webkit-flex‬‬
‫;1:‪-ms-flex‬‬
‫/*יחס עמודות*/;1:‪flex‬‬
‫}‬
‫;1:‪flex:1; = flex-grow‬‬
‫‪column‬‬
‫‪Live Example‬‬
‫‪http://codepen.io/elad2412/pen/cfagr‬‬

26. ‫יצירת ‪ layout‬על בסיס ה-‪flex‬‬

27. ‫ בסיסי‬layout ‫יצירת‬
.flex-container{
width: 600px;
display: flex;
}
.flex1, .flex3{
flex:1;
}
.flex2{
flex:4;
}

28. ? margin ‫ או‬padding ‫מה קורה שיש לנו‬
.flex-container{
width: 600px;
display: flex;
}
.box{ padding: 20px; }
.flex1, .flex3{
flex:1;
}
.flex2{
flex:4;
}
!content‫חישוב היחסים הוא רק על ה‬
padding
(20*2)*3=120px
content
600-120=480px
total unit row = 6 (1 + 4 + 1)
1 unit 480/6 = 80
flex:1 = 1*80 + 40(padding) = 120
flex:4 = 4*80 + 40(padding) = 360
http://codepen.io/elad2412/pen/FnkvJ

29. ‫רוחב מינמאלי לאייטם‬
flex-basis
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%;
http://codepen.io/elad2412/pen/uGzDd
flex-basis ‫ ביחד עם‬flex grow ‫* כתיב מקצור שך‬
flex:1 400px;

30. flex-basis:auto;

31. ‫הגדרת התכווצות במקרה של חוסר מקום‬
‫‪flex-shrink‬‬
‫* ברב המקרים סביר להניח שלא תצטרכו להשתמש בהגדרה הזאת. אך בכל זאת בו נבהיר מה תפקידה.‬
‫בוא נניח שיש לנו ‪ container‬שבתוכו יש מספר אייטמים שלכולם יש יחס שווה וההגדרה שלנו לנו‬
‫לאיימטים היא 1:‪ ,flex‬כלומר תמתחו בגודל שווה.‬
‫בנוסף לא הגדרנו ב-‪ container‬מה קורה במצב חריגה, מה שישאיר את הברירת מחדל ב-‪.nowrap‬‬
‫‪flex-wrap: nowrap‬‬
‫זה מה שיקרה כאשר יהיו יותר מידי אייטמים‬
‫הברירת מחדל של ה‪ ,flex-shrink‬היא ערך 1. מה שאומר תתכווץ ביחס שווה במידה ואין מקום.‬
‫אנחנו יכולים להגדיר לכל אייטם האם אנחנו רוצים שהוא יתכווץ במקרה של חריגה או שלא.‬
‫על מנת לפתור את בעיית ההתכווצות יתר של האייטמים, יהיה עלינו לתת את הערך 0, אשר ימנע‬
‫מהאייטמים להתכווץ במקרה של חריגה. 0:‪flex-shrink‬‬
‫ככה זה יראה אחרי ההגדרה של 0:‪flex-shrink‬‬

32. ‫ישור אייטם ספציפי‬
align-self
.flex-3{
-webkit-align-self:flex-start;
-ms-flex-item-align:start;
align-self:flex-start;
}
http://codepen.io/elad2412/pen/JBphc

33. ‫ישור אייטם ספציפי )המשך(‬
‫* יעבוד גם במצב של מספר שורות‬

34. ‫שינוי סדר אייטמים‬
‫‪order‬‬
‫* לכל האיטמים קיימת ההגדרה הזאת כברירת מחדל עם הערך 0.‬
‫* על מנת לשנות להקפיץ אייטם אחד מהסוף להתחלה, יש לתת לאייטם ערך השונה מ 0.‬
‫* במידה ורוצים לשנות מספר אייטמים יש לתת לכולם ערכים מספריים ולמקם בהתאם.‬
‫* במידה ורוצים להפוך את סדר הרשימה עדיף להשתמשב ‪,flex-direction: row-reverse/column-reverse‬‬
‫המשפיע על כל האייטמים, במקום לעבור אייטם אייטם. כמובם שיש לסדר גם את היישור בהתאם.‬
‫;1-:‪-webkit-order‬‬
‫;1-:‪-ms-flex-order‬‬
‫;1-:‪order‬‬
‫{3‪.flex‬‬
‫;1-:‪order‬‬
‫;‪border-color:red‬‬
‫}‬
‫‪http://codepen.io/elad2412/pen/kDuao‬‬

35. ‫מה למדנו עד עכשיו על אייטמים של ‪flexbox‬‬
‫‪flex-grow‬‬
‫* ניתן לקבוע יחסי עמודות בצורה מאוד קלה ע"י קביעת ערך מספרי כלשהו. 1:‪flex-grow‬‬
‫* חישוב יחסי העמודות הינו על ה-‪ content‬בלבד ולא כולל ‪.margins/borders/paddings‬‬
‫* בעזרת הערכים היחסיים שלו, ניתן די בקלות ליצור ‪.layouts‬‬
‫‪flex basis‬‬
‫* קביעת רוחב מינימאלי של אייטם ‪flex-basis: 200px‬‬
‫* ‪ - flex-basis:auto‬יחסי ה‪ flex-grow‬ישתנו מאייטמים לריווחי טקסט.‬
‫‪flex-shrink‬‬
‫* ניתן להגדיר מה יקרה במקרה חריגה לאיימטים עם ערך מספרי יחסי כלשהו בין 0 ל 1.‬
‫0:‪flex-shrink‬‬
‫הגדרות אחרות:‬
‫* ישור אייטם ספציפי - ‪align-self‬‬
‫* שינוי סדר אייטם ספציפי - ‪order‬‬

36. ‫ית‬flex ‫ בשימוש ברוחב מינמאלי והתנהגות‬layout ‫יצירת‬
flex-grow:1 & flex basis
CSS
.flex-container{ display:flex; flex-flow: row wrap;}
.box{ flex:1; } /*all box*/
.flex1{ flex-basis: 100%;}
.flex3{ flex-basis: 60%;}
.flex2,.flex4{ flex-basis: 20%;}
.flex9{ flex-basis: 100%;}
http://codepen.io/elad2412/pen/tfqBu
HTML
<section class="flex-container">
<header class="box flex1"></header>
<aside class="box flex2"></aside>
<section class="box flex3"></section>
<aside class="box flex4"></aside>
<article class="box flex5"></article>
<article class="box flex6"></article>
<article class="box flex7"></article>
<article class="box flex8"></article>
<footer class="box flex9"></footer>
</section>

37. ‫תמיכה בדפדפנים‬
‫מה לא נתמך באופן מלא בדפדפנים‬
‫ ‪ - flexwrap‬ההתנהגות הדיפולטית קיימת )‪ ,(nowrap‬שאר ההתנהגיות לא נתמכות‬‫בדפדנים ישנים של אנדרואיד)מערכת הפעלה( ופיירפוקס.‬
‫ ‪ - flex-flow‬התחביר המקוצר של ‪ flex-direction‬ו ‪ ,flex-wrap‬גם הוא לא נתמך‬‫באנדרואיד)מערכת הפעלה( ופיירפוקס. אך אפשר להשתמש ב ‪ flex-direction‬בנפרד.‬
‫ ‪ - justify-content‬ישור אלמנטים בציר הראשי הרב עובד בכל הדפדפנים שתומכים‬‫‪ ,flexbox‬פרט להגדרה של ‪.space-between‬‬
‫ ‪ - align-items‬ישור אלמנטים בציר המישני הרב עובד בכל הדפדפנים שתומכים‬‫‪ ,flexbox‬פרט להגדרה של ‪.baseline‬‬
‫ ‪ - order‬סידור אלמנטים עובד בכולם. בדפדפנים ישנים לא עובד טוב, עם ערכים שליליים‬‫)מעלים את האלמנטים(, שזה קצת מעצבן כי הברירת מחדל היא 0,ולהביא אלמנט מסויים‬
‫מההתחלה לסוף אומר שאני צריך להגדיר את כל האלמנטים. הפיתרון הוא לאפס לכל‬
‫האלמנטים את הברירת מחדל מ 0 ל 1, ואז יהיה ניתן לתת לאלמנט מסויים את הערך 0‬
‫במקום 1-.‬

38. ‫תמיכה בדפדפנים‬
‫, על מנת לתת תמיכה‬flexbox ‫ כולל גרסאות ישנות של‬prefix ‫ שמיצרת את כל ה‬less ‫ ספרייה ב‬.‫מקסימאלית‬
https://github.com/ProLoser/Flexbox.less/blob/master/flexbox.less

39. ‫דברים אחרים‬
‫* אין ‪ margin collapse‬בהגדרה‬
‫* ‪ ,min-width & min-height‬יקבלו ערך נוסף חדש ‪ ,auto‬על מנת לתמוך בגודל מינמאלי‬
‫לתוכן של אייטם.‬
‫לדוגמא - כדי למנוע מצב שבו הטקסט חורג מהגודל של האייטם בו הוא נמצא‬

40. ‫קישורים מומלצים‬
flexbox ‫ מאמרים טובים בנושא‬/http://css-tricks.com/using-flexbox
/http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox
w3c - flexbox
/http://www.w3.org/TR/css3-flexbox
Firefox
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Microsoft IE10
http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
Can I Use
http://caniuse.com/flexbox
A Complete Guide to Flexbox
/http://css-tricks.com/snippets/css/a-guide-to-flexbox

41. By Elad Shechter
Our CSS Facebook Group:
facebook.com/groups/css.masters.israel/
My Articles:
coderwall.com/elad2412
wmp.co.il
Presentation Link
http://goo.gl/GpaAsg