Getting to Know Flexbox By Elad Shechter facebook.com/groups/css.masters.israel/ coderwall.com/elad2412 wmp.co.il
Getting to Know Flexbox
By Elad Shechter
facebook.com/groups/css.masters.israel/
coderwall.com/elad2412
wmp.co.il
? Flexbox מה זה
* Flexbox הינו סוג display חדש, המצטרף לרשימת הdisplay-ים שהינכם מכירים.
....block,inline,inline-block :לדוגמא
layouts שיטה חדשה ליצירת *
flexbox, למה זה טוב?- גמישות בגדלים וחישוב קל של יחסי גדלים בין אלמנטים
- סדר אלמנטים- יישור אלמנטים
- לייאוטים- מרכוז אלמנטים
http://codepen.io/elad2412/pen/Hvmbq
http://codepen.io/elad2412/pen/IExeA
http://codepen.io/elad2412/pen/zJIwo
תמיכה דפדפנים - נרחיב בהמשך...
from: http://www.environmentsforhumans.com/2013/css-summit/presentations/Williamson-CSSsummit2013-Flexbox.pdf
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>
כולם חייבים להיות בנים ישירים!
הגדרות ה-flexbox על container-ה
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 איך ההגדרה שלתשפיע לנו על התצוגה?
display:flex ככה נראה העיצוב לפני שהוספנו את ה
http://codepen.io/elad2412/pen/hqHCD
container ל display:flex לפני ואחרי הוספה של
לפני אחרי
flexbox מערכת הצירים של
הגדרת הציר הראשיוההשפעה על האייטמים שבתוכו
flex-direction
.flex-container {
-webkit-flex-direction:row; /* row/column/column-reverse/row-reverse */ -ms-flex-direction:row; flex-direction: row;
} row column
Live Example:http://codepen.io/elad2412/pen/sIuEb
הגדרת הציר הראשי(המשך)הפיכת סדר האייטמים
flex-direction: row-reverse/column-reverse
.flex-container {
flex-direction: row-reverse;
} row column
row-reverse column-reverse
התנהגיות שבירה וחריגהflex-wrap
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; /* nowrap / wrap / wrap-reverse*/
Rowwrap nowrap
Columnwrap nowrap
Live Example:http://codepen.io/elad2412/pen/IwDry
התנהגיות שבירה וחריגה(המשך)היפוך סדר השורות
flex-wrap:wrap-reverse
Live Example:http://codepen.io/elad2412/pen/aliKr
flex-wrap: wrap-reverse;
Rowwrap wrap-reverse
Columnwrap wrap-reverse
flex-direction & flex-wrap סינטקס מקוצר שלflex-flow
.flex-container {
flex-direction: row; flex-wrap: wrap;
}
=; /*סינטקס מקוצר*/
flex-flow: row wrap;
התנהגות ה flex הטבעי* אני לא יודע אם שמתם לב, אבל באופן טבעי הטורים או העמודות תופסים את כל הרוחב או
הגובה שלהם בתוך הcontainer, זה עוד לפני שנתנו הגדרת flex כלשהיא לאייטמים. - ההגדרה הזאת מאפשרת לנו ליצור layouts, בצורה קלה ונוחה.
- ההגדרה הזאת ניתנת לשינוי
row column
ישור אלמנטים ציר ראשי 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 (flex:1 for the items)
flex-flow: column wrap; flex-start flex-end center space-around space-between (flex:1 for the items)
http://codepen.io/elad2412/pen/duFvn
ישור אלמנטים ציר משני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 stretch
flex-flow: column wrap; flex-start flex-end center baseline stretch
http://codepen.io/elad2412/pen/jthvy
אם לא התבלבלתם עד עכשיו....אזעכשיו זה הזמן
ישור אייטמים במצב של מספר שורות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
flex-flow: column wrap; flex-start flex-end center space-between space-around stretch
http://codepen.io/elad2412/pen/ADeuG
align-items הגדרתמאבדת רלונטיות
ברגע שמשתמשים ב .align-content
התנהגויות של flexbox, שלמדנו עד עכשיו* כל ההגדרות על שדיברנו עד עכשיו היו על ה-container עצמו בלבד.
* עקב הגדרת ה-container שלנו כ flexbox, האייטמים של ה-container יתיישרו בשורה אחד, שזוהי ברירת .flexbox של container המחדל של האייטמים ב
.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-content מאבדת רלונטיות ברגע שמשתמשים ב align-items הגדרת -
התנהגויות של flexbox, שלמדנו עד עכשיו (המשך)
התנהגות טבעית של אייטמים align-items:stretch (ברירת מחדל)* כאשר אנחנו בישור הורזונטלי הברירת מחדל הורטיקלית שלנו היא התרחבות ורטיקאלית.* כאשר אנחנו בישור ורטיקאלי הברירת מחדל הורזנטלית שלנו היא התרחבות הורזנטאלית.
דוגמא:
* כל ורק הבנים הישירים של ה-container שעליו הוגדר ה-flexbox יושפעו ממנו. מה שאומר שהבנים של הבנים לא מושפעים.
* הירכיית flexbox עובדת רק על בנים ישירים. אך זה לא אומר שבתוך הבן עצמו אי-אפשר יהיה ליצור container אשר גם הוא יהיה flexbox עם בנים ישירים משלו.
הגדרות ה flexbox על items-ה
הגדרות התנהגות לאייטמים בודדים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)
הגדרות flex(יחסים) לאייטמיםflex-grow
* הערך המספרי של flex-grow משקף את הגודל שלו ביחס לאחים שלו. במידה וניתן ערך שווה מעל 0 כל האייטמים יהיו שווים בגודלם ויתפסו את כל גודלו של
הcontainer בציר הראשי .box{ -webkit-flex:1; -ms-flex:1; flex:1;/*יחס עמודות*/}
flex:1; = flex-grow:1;
Live Examplehttp://codepen.io/elad2412/pen/cfagr
row
column
flex-על בסיס ה layout יצירת
יצירת layout בסיסי.flex-container{ width: 600px; display: flex;}.flex1, .flex3{ flex:1;}.flex2{ flex:4;}
? margin או padding מה קורה שיש לנו
.flex-container{ width: 600px; display: flex;}.box{ padding: 20px; }.flex1, .flex3{ flex:1;}.flex2{ flex:4;}
http://codepen.io/elad2412/pen/FnkvJ
!contentחישוב היחסים הוא רק על הpadding(20*2)*3=120px
content600-120=480px
total unit row = 6 (1 + 4 + 1)1 unit 480/6 = 80flex:1 = 1*80 + 40(padding) = 120flex:4 = 4*80 + 40(padding) = 360
רוחב מינמאלי לאייטם 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;
flex-basis:auto;
הגדרת התכווצות במקרה של חוסר מקוםflex-shrink
* ברב המקרים סביר להניח שלא תצטרכו להשתמש בהגדרה הזאת. אך בכל זאת בו נבהיר מה תפקידה.
בוא נניח שיש לנו container שבתוכו יש מספר אייטמים שלכולם יש יחס שווה וההגדרה שלנו לנו לאיימטים היא flex:1, כלומר תמתחו בגודל שווה.
.nowrap-מה קורה במצב חריגה, מה שישאיר את הברירת מחדל ב container-בנוסף לא הגדרנו בflex-wrap: nowrap
זה מה שיקרה כאשר יהיו יותר מידי אייטמים
הברירת מחדל של הflex-shrink, היא ערך 1. מה שאומר תתכווץ ביחס שווה במידה ואין מקום.אנחנו יכולים להגדיר לכל אייטם האם אנחנו רוצים שהוא יתכווץ במקרה של חריגה או שלא.
על מנת לפתור את בעיית ההתכווצות יתר של האייטמים, יהיה עלינו לתת את הערך 0, אשר ימנע flex-shrink:0 .מהאייטמים להתכווץ במקרה של חריגה
flex-shrink:0 ככה זה יראה אחרי ההגדרה של
ישור אייטם ספציפיalign-self
.flex-3{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start;}
http://codepen.io/elad2412/pen/JBphc
ישור אייטם ספציפי (המשך)
* יעבוד גם במצב של מספר שורות
שינוי סדר אייטמיםorder* לכל האיטמים קיימת ההגדרה הזאת כברירת מחדל עם הערך 0.
* על מנת לשנות להקפיץ אייטם אחד מהסוף להתחלה, יש לתת לאייטם ערך השונה מ 0.* במידה ורוצים לשנות מספר אייטמים יש לתת לכולם ערכים מספריים ולמקם בהתאם.
,flex-direction: row-reverse/column-reverse במידה ורוצים להפוך את סדר הרשימה עדיף להשתמשב *המשפיע על כל האייטמים, במקום לעבור אייטם אייטם. כמובם שיש לסדר גם את היישור בהתאם.
-webkit-order:-1; -ms-flex-order:-1; order:-1;
.flex3{order:-1;
border-color:red;}
http://codepen.io/elad2412/pen/kDuao
flexbox מה למדנו עד עכשיו על אייטמים שלflex-grow
flex-grow:1 .ניתן לקבוע יחסי עמודות בצורה מאוד קלה ע"י קביעת ערך מספרי כלשהו *.margins/borders/paddings בלבד ולא כולל content-חישוב יחסי העמודות הינו על ה *
.layouts בעזרת הערכים היחסיים שלו, ניתן די בקלות ליצור *
flex basisflex-basis: 200px קביעת רוחב מינימאלי של אייטם *
* flex-basis:auto - יחסי הflex-grow ישתנו מאייטמים לריווחי טקסט.
flex-shrink* ניתן להגדיר מה יקרה במקרה חריגה לאיימטים עם ערך מספרי יחסי כלשהו בין 0 ל 1.
flex-shrink:0
הגדרות אחרות:align-self - ישור אייטם ספציפי *order - שינוי סדר אייטם ספציפי *
יצירת layout בשימוש ברוחב מינמאלי והתנהגות flexיתflex-grow:1 & flex basis
.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%;}
<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>
CSS HTML
http://codepen.io/elad2412/pen/tfqBu
תמיכה בדפדפניםמה לא נתמך באופן מלא בדפדפנים
- flexwrap - ההתנהגות הדיפולטית קיימת (nowrap), שאר ההתנהגיות לא נתמכות בדפדנים ישנים של אנדרואיד(מערכת הפעלה) ופיירפוקס.
- flex-flow - התחביר המקוצר של flex-direction ו flex-wrap, גם הוא לא נתמך באנדרואיד(מערכת הפעלה) ופיירפוקס. אך אפשר להשתמש ב flex-direction בנפרד.
- justify-content - ישור אלמנטים בציר הראשי הרב עובד בכל הדפדפנים שתומכים .space-between פרט להגדרה של ,flexbox
- align-items - ישור אלמנטים בציר המישני הרב עובד בכל הדפדפנים שתומכים .baseline פרט להגדרה של ,flexbox
- order - סידור אלמנטים עובד בכולם. בדפדפנים ישנים לא עובד טוב, עם ערכים שליליים(מעלים את האלמנטים), שזה קצת מעצבן כי הברירת מחדל היא 0,ולהביא אלמנט מסויים
מההתחלה לסוף אומר שאני צריך להגדיר את כל האלמנטים. הפיתרון הוא לאפס לכל האלמנטים את הברירת מחדל מ 0 ל 1, ואז יהיה ניתן לתת לאלמנט מסויים את הערך 0
במקום 1-.
תמיכה בדפדפנים- ספרייה ב less שמיצרת את כל ה prefix כולל גרסאות ישנות של flexbox, על מנת לתת תמיכה
מקסימאלית.https://github.com/ProLoser/Flexbox.less/blob/master/flexbox.less
דברים אחרים* אין margin collapse בהגדרה
* min-width & min-height, יקבלו ערך נוסף חדש auto, על מנת לתמוך בגודל מינמאלי לתוכן של אייטם.
לדוגמא - כדי למנוע מצב שבו הטקסט חורג מהגודל של האייטם בו הוא נמצא
קישורים מומלצים
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
Firefoxhttps://developer.mozilla.org/en-US/docs/Web/CSS/align-items
Microsoft IE10http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
Can I Usehttp://caniuse.com/flexbox
A Complete Guide to Flexbox/http://css-tricks.com/snippets/css/a-guide-to-flexbox
By Elad ShechterOur CSS Facebook Group:facebook.com/groups/css.masters.israel/
My Articles:coderwall.com/elad2412
wmp.co.il
Presentation Linkhttp://goo.gl/GpaAsg