CSS Flexbox

681 views

Published on

Published in: Education
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
681
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Flexbox

  1. 1. Getting to Know Flexbox By Elad Shechter facebook.com/groups/css.masters.israel/ coderwall.com/elad2412 wmp.co.il
  2. 2. ? Flexbox ‫מה זה‬
  3. 3. ‫* ‪ Flexbox‬הינו סוג ‪ display‬חדש, המצטרף לרשימת ה‪-display‬ים‬ ‫שהינכם מכירים.‬ ‫לדוגמא: ‪....block,inline,inline-block‬‬ ‫* שיטה חדשה ליצירת ‪layouts‬‬
  4. 4. ‫‪ ,flexbox‬למה זה טוב?‬ ‫ גמישות בגדלים וחישוב קל של יחסי גדלים בין אלמנטים‬‫ סדר אלמנטים‬‫ יישור אלמנטים‬‫ לייאוטים‬‫- מרכוז אלמנטים‬ ‫‪http://codepen.io/elad2412/pen/Hvmbq‬‬ ‫‪http://codepen.io/elad2412/pen/IExeA‬‬ ‫‪http://codepen.io/elad2412/pen/zJIwo‬‬
  5. 5. ...‫תמיכה דפדפנים - נרחיב בהמשך‬ from: http://www.environmentsforhumans.com/2013/css-summit/presentations/Williamson-CSSsummit2013-Flexbox.pdf
  6. 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. 7. ‫ על‬flexbox-‫הגדרות ה‬ container-‫ה‬
  8. 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. 9. ‫לפני ואחרי הוספה של ‪ display:flex‬ל ‪container‬‬ ‫לפני‬ ‫אחרי‬
  10. 10. ‫מערכת הצירים של ‪flexbox‬‬
  11. 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. 12. (‫הגדרת הציר הראשי)המשך‬ ‫הפיכת סדר האייטמים‬ flex-direction: row-reverse/column-reverse .flex-container { flex-direction: row-reverse; } row row-reverse column column-reverse
  13. 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. 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. 15. flex-direction & flex-wrap ‫סינטקס מקוצר של‬ flex-flow .flex-container { flex-direction: row; flex-wrap: wrap; } = /*‫; /*סינטקס מקוצר‬ flex-flow: row wrap;
  16. 16. ‫התנהגות ה ‪ flex‬הטבעי‬ ‫* אני לא יודע אם שמתם לב, אבל באופן טבעי הטורים או העמודות תופסים את כל הרוחב או‬ ‫הגובה שלהם בתוך ה‪ ,container‬זה עוד לפני שנתנו הגדרת ‪ flex‬כלשהיא לאייטמים.‬ ‫ ההגדרה הזאת מאפשרת לנו ליצור ‪ ,layouts‬בצורה קלה ונוחה.‬‫- ההגדרה הזאת ניתנת לשינוי‬ ‫‪column‬‬ ‫‪row‬‬
  17. 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. 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. 19. ‫אם לא התבלבלתם‬ ‫עד עכשיו....אז‬ ‫עכשיו זה הזמן‬
  20. 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. 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. 22. ‫התנהגויות של ‪ ,flexbox‬שלמדנו עד עכשיו )המשך(‬ ‫התנהגות טבעית של אייטמים ‪) align-items:stretch‬ברירת מחדל(‬ ‫* כאשר אנחנו בישור הורזונטלי הברירת מחדל הורטיקלית שלנו היא התרחבות ורטיקאלית.‬ ‫* כאשר אנחנו בישור ורטיקאלי הברירת מחדל הורזנטלית שלנו היא התרחבות הורזנטאלית.‬ ‫דוגמא:‬ ‫* כל ורק הבנים הישירים של ה-‪ container‬שעליו הוגדר ה-‪ flexbox‬יושפעו ממנו. מה שאומר שהבנים של הבנים לא‬ ‫מושפעים.‬ ‫* הירכיית ‪ flexbox‬עובדת רק על בנים ישירים. אך זה לא אומר שבתוך הבן עצמו אי-אפשר יהיה ליצור ‪ container‬אשר‬ ‫גם הוא יהיה ‪ flexbox‬עם בנים ישירים משלו.‬
  23. 23. ‫ על‬flexbox ‫הגדרות ה‬ items-‫ה‬
  24. 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. 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. 26. ‫יצירת ‪ layout‬על בסיס ה-‪flex‬‬
  27. 27. ‫ בסיסי‬layout ‫יצירת‬ .flex-container{ width: 600px; display: flex; } .flex1, .flex3{ flex:1; } .flex2{ flex:4; }
  28. 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. 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. 30. flex-basis:auto;
  31. 31. ‫הגדרת התכווצות במקרה של חוסר מקום‬ ‫‪flex-shrink‬‬ ‫* ברב המקרים סביר להניח שלא תצטרכו להשתמש בהגדרה הזאת. אך בכל זאת בו נבהיר מה תפקידה.‬ ‫בוא נניח שיש לנו ‪ container‬שבתוכו יש מספר אייטמים שלכולם יש יחס שווה וההגדרה שלנו לנו‬ ‫לאיימטים היא 1:‪ ,flex‬כלומר תמתחו בגודל שווה.‬ ‫בנוסף לא הגדרנו ב-‪ container‬מה קורה במצב חריגה, מה שישאיר את הברירת מחדל ב-‪.nowrap‬‬ ‫‪flex-wrap: nowrap‬‬ ‫זה מה שיקרה כאשר יהיו יותר מידי אייטמים‬ ‫הברירת מחדל של ה‪ ,flex-shrink‬היא ערך 1. מה שאומר תתכווץ ביחס שווה במידה ואין מקום.‬ ‫אנחנו יכולים להגדיר לכל אייטם האם אנחנו רוצים שהוא יתכווץ במקרה של חריגה או שלא.‬ ‫על מנת לפתור את בעיית ההתכווצות יתר של האייטמים, יהיה עלינו לתת את הערך 0, אשר ימנע‬ ‫מהאייטמים להתכווץ במקרה של חריגה. 0:‪flex-shrink‬‬ ‫ככה זה יראה אחרי ההגדרה של 0:‪flex-shrink‬‬
  32. 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. 33. ‫ישור אייטם ספציפי )המשך(‬ ‫* יעבוד גם במצב של מספר שורות‬
  34. 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. 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. 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. 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. 38. ‫תמיכה בדפדפנים‬ ‫, על מנת לתת תמיכה‬flexbox ‫ כולל גרסאות ישנות של‬prefix ‫ שמיצרת את כל ה‬less ‫ ספרייה ב‬.‫מקסימאלית‬ https://github.com/ProLoser/Flexbox.less/blob/master/flexbox.less
  39. 39. ‫דברים אחרים‬ ‫* אין ‪ margin collapse‬בהגדרה‬ ‫* ‪ ,min-width & min-height‬יקבלו ערך נוסף חדש ‪ ,auto‬על מנת לתמוך בגודל מינמאלי‬ ‫לתוכן של אייטם.‬ ‫לדוגמא - כדי למנוע מצב שבו הטקסט חורג מהגודל של האייטם בו הוא נמצא‬
  40. 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. 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

×