מאפיין הגמיש ב-CSS הוא קיצור של להגמיש-לגדול, להגמיש-לכווץ, ועל בסיס גמיש. זה עובד רק על הפריטים הגמישים, כך שאם הפריט של המכולה אינו פריט גמיש, לְהַגמִישׁ הנכס לא ישפיע על הפריט המתאים.

מאפיין זה משמש להגדרת האורך של פריטים גמישים. המיקום של רכיבי צאצא והמיכל הראשי קל עם מאפיין CSS זה. הוא משמש כדי לקבוע כיצד פריט גמיש יתכווץ או יגדל כך שיתאים לחלל.

ה לְהַגמִישׁ ניתן לציין מאפיין על ידי ערך אחד, שניים או שלושה.

• כאשר יש תחביר של ערך אחד, הערך חייב להיות מספר או מילות מפתח כגון אף אחד, אוטומטי, אוֹ התחלתי .
• כאשר יש את התחביר של שני ערכים, הערך הראשון חייב להיות מספר (המשמש כ להגמיש-לגדול ), הערך השני יכול להיות מספר (המשמש עבור flex-shrink ) או ערך רוחב חוקי (בשימוש בתור בסיס גמיש ).
• כאשר יש תחביר של שלושה ערכים, אז הערכים חייבים לפעול לפי הסדר: א מספר בשביל ה להגמיש-לגדול, א מספר בשביל ה flex-shrink, ותקף רוֹחַב ערך עבור בסיס גמיש .

תחביר

 flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit; 

ערך הנכס

flex-grow: זהו מספר חיובי ללא יחידה שקובע את גורם הגמישות. זה מציין כמה הפריט יגדל בהשוואה לפריטים הגמישים האחרים. ערכים שליליים אינם מותרים. אם זה מושמט, אז זה מוגדר לערך 1 .

flex-shrink: זה המספר החיובי ללא יחידה שקובע את גורם ה-flex shink. זה מציין כמה הפריט יתכווץ בהשוואה לשאר הפריטים הגמישים. ערכים שליליים אינם מותרים. אם זה מושמט, אז זה מוגדר לערך 1 .

בסיס גמיש: האורך ביחידות יחסיות או מוחלטות הוא שמגדיר את האורך ההתחלתי של הפריט הגמיש. הוא משמש להגדרת אורך הפריט הגמיש. הערכים שלו יכולים להיות מכונית, ירושה, או מספר ואחריו יחידות האורך כגון em, px, וכו' ערכים שליליים אינם מותרים. אם זה מושמט, אז זה מוגדר לערך 0 .

אוטומטי: ערך זה של מאפיין הגמיש שווה ערך ל 1 1 אוטומטי .

אף אחד: ערך זה של מאפיין הגמיש שווה ערך ל 0 0 אוטומטי . זה לא גדל ולא מכווץ את הפריטים הגמישים.

התחלתי: זה מגדיר את המאפיין לערך ברירת המחדל שלו. זה שווה ערך ל 0 0 אוטומטי .

לָרֶשֶׁת: הוא יורש את הנכס מאלמנט האב שלו.

דוגמא

בדוגמה זו, ישנם שלושה מיכלים, שלכל אחד מהם שלושה פריטי flex. ה רוֹחַב וגובה המיכלים הם 300 פיקסלים ו 100 פיקסלים .

אנו מיישמים את flex: 1; לפריטים הגמישים של המיכל הראשון, flex: 0 50px; ל-flex-items של המיכל השני, ו flex: 2 2; לפריטים הגמישים של המכולה השלישית.

 CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> 

תְפוּקָה