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