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

איך נותנים מקום ב-Flex?
איך נותנים מקום ב-Flex?

וִידֵאוֹ: איך נותנים מקום ב-Flex?

וִידֵאוֹ: איך נותנים מקום ב-Flex?
וִידֵאוֹ: Easy Flexbox Column Spacing | Flex Gap CSS Property | Row Gap, Column Gap, Gap & Spacing in CSS 2024, אַפּרִיל
Anonim

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

באופן דומה, איך ממקמים פריטים גמישים?

סיכום

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

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

פשוט כך, האם אני יכול להשתמש במרחב תוכן להצדיק?

ה מֶרחָב ערך שווה עבור ה- לְהַצְדִיק - תוֹכֶן רכוש מפיץ את מֶרחָב בין הפריטים באופן שווה. זה דומה ל מֶרחָב - סְבִיב אבל מספק שווה במקום בגודל חצי מֶרחָב על הקצוות. פחית לִהיוֹת בשימוש גם ב-CSS flexbox וגם ב-grid.

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

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

מוּמלָץ: