כיצד ליצור תמונות מסתגלות עם CSS Flexbox

. לאחר מכן, אפשר לתמונות לעבור לשורה הבאה בעת הצורך על ידי הגדרת ' גמיש-עטיפה 'ערך הנכס ל' לַעֲטוֹף '.

לאחר מכן, החל CSS על התמונות על ידי ציון ' img ' ביחד איתי ' .images-container 'שם. ראשית, הגדר את ' לְהַגמִישׁ 'ערך הנכס ל' 1 ' על מנת לחלק את השטח הפנוי הפנוי בין התמונות באופן שווה. לאחר מכן, הגדר את ' רוחב מקסימלי 'ערך הנכס ל' 100% כדי להבטיח שהתמונות לא יחרגו מהרוחב המקורי שלהן. הגדר את ' גוֹבַה 'ערך הנכס ל' אוטומטי ' כדי לשמור על יחס הגובה-רוחב. לבסוף, הוסף מרווח בין תמונות על ידי הגדרת ' שולים 'ערך הנכס ל' 10 פיקסלים ”:

.images-container {
לְהַצִיג: לְהַגמִישׁ ;
flex-wrap: לעטוף;
}

.images-container img {
לְהַגמִישׁ: 1 ;
רוחב מקסימלי: 100 % ;
גובה: אוטומטי;
שוליים: 10px;
}

לפני גלישת

התמונות המותאמות באמצעות CSS Flexbox נוצרו בהצלחה. תצוגת הפלט שלהלן היא לפני הגלישה של חלון הדפדפן:

לאחר גלישת

כעת, בואו נסגור את חלון הדפדפן כדי לבדוק אם התמונה מותאמת אינה:

התמונה לעיל מאשרת שהתמונות שנוספו הן אדפטיביות.

סיכום

כדי ליצור את התמונות המותאמות עם CSS Flexbox, המשתמש צריך תחילה ליצור את מבנה ה-HTML, ולאחר מכן, להגדיר את