תוכן עניינים:

מה זה מיכל Flexbox?
מה זה מיכל Flexbox?

וִידֵאוֹ: מה זה מיכל Flexbox?

וִידֵאוֹ: מה זה מיכל Flexbox?
וִידֵאוֹ: How The Elementor Flexbox Container Works - A Complete Guide 2024, נוֹבֶמבֶּר
Anonim

א מיכל להגמיש מרחיב פריטים כדי למלא מקום פנוי פנוי או מכווץ אותם כדי למנוע הצפה. והכי חשוב, ה flexbox הפריסה היא אגנוסטית לכיוון בניגוד לפריסות הרגילות (בלוק שמבוסס אנכית ו-inline שמבוסס אופקית).

לגבי זה, איך אתה משתמש ב-Flexbox?

סיכום

  1. השתמש בתצוגה: flex; כדי ליצור מיכל גמיש.
  2. השתמש ב-justify-content כדי להגדיר את היישור האופקי של פריטים.
  3. השתמש ב-align-items כדי להגדיר את היישור האנכי של פריטים.
  4. השתמש ב-flex-direction אם אתה צריך עמודות במקום שורות.
  5. השתמש בערך היפוך שורה או עמודה הפוכה כדי להפוך את סדר הפריטים.

איך מכינים מיכל Flex? לפני שתוכל להשתמש בכל flexbox נכס, עליך להגדיר א מיכל להגמיש בפריסה שלך. אתה ליצור מיכל flex על ידי הגדרת תכונת התצוגה של אלמנט לאחד מה- flexbox ערכי פריסה: לְהַגמִישׁ או מוטבע- לְהַגמִישׁ . כברירת מחדל, לְהַגמִישׁ פריטים מונחים אופקית על הציר הראשי משמאל לימין.

באופן זה, למה משמש Flexbox?

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

מהי כיוון ברירת המחדל בתוך מיכל Flex?

ה בְּרִירַת מֶחדָל סידור לאחר החלת תצוגה: לְהַגמִישׁ היא שהפריטים יהיו מסודרים לאורך הציר הראשי משמאל לימין. האנימציה למטה מראה מה קורה מתי לְהַגמִישׁ - כיוון : העמודה מתווספת ל- מְכוֹלָה אֵלֵמֶנט. אתה יכול גם להגדיר flex - כיוון להיפוך שורה ולהפוך עמודה.

מוּמלָץ: