display:flex
מגדיר את האלמנט
בנקודות:
flex-directions: סוג השורה או העמודה וכו'
alingn-items – ציר הגובה Y
justify-content – ציר רוחבי X
flex-direction
flex-direction:row – דיפולט מתנהג כמו בלוק,ניתן לשנות לבנה טבלה או להפוך סדר תצוגה וכו
flex-wrap
flex-wrap: wrap; – ישמור על האלמנטים בתוך הקונטיינר וירד שורה לפי חלוקת הגודל
justify-content
align-items
align-items: stretch; – דיפולט לרוב נרצה מרכוז ונשתמש ב center. במישור האנכי
מרכוז מושלם וכולל space-around
align-content vs align-items
flex-flow
שתי התכונות flex-direction ו-flex-wrap משומשות כל כך הרבה ביחד שהתכונה המקוצרת flex-flow נוצרה כדי לשלב בינהן. התכונה המקוצרת הזו מקבלת ערכים של שתי התכונות, מופרדים על ידי רווח.לדוגמא, אפשר להשתמש ב-flex-flow: row wrap כדי להגדיר שורות ולעטוף אותן.
דוגמה למבנה ממורכז
<div class="container">
<div class="box">
i am a box!
</div>
<div class="box">
i am a box!
</div>
</div>
.container {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 100vh;
}
// --- everything below is just for styling ---
// box styles
// not relevant except to look good
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 200px;
background: #fff;
padding: 10px;
border-radius: 10px;
position: relative;
text-align: center;
}
div {
display: flex;
justify-content: space-between;
}
justify-content: space-between; – יוצר רווחים זהים בין האלמנטים . שימושי מאוד