איך דוחפים תוכן ב Flex box

יש כמה דרכים לשלוט במיקום התוכן ב Flex box, אבל אם רוצים לדחוף תוכן ספציפי, הדרך הפשוטה ביותר היא עם margin: auto. אם תסתכלו על הדוגמה הבאה:

<div class="paren">
  <div class="child-1"></div>
  <div class="child-2"></div>
  <div class="child-2"></div>
</div>

נוכל לסדר את התוכן כך:

.parent {
  display: dlex;
  justify-content: start;
}

.parent > div {
  height: 50px;
  width: 50px;
  background: darkred;
}

.child-3 {
  margin-left: auto;
}

התוצאה שתתקבל במצב כזה, היא שתי קוביות שצמודות לצד שמאל של המסך, בעוד שהקוביה הימנית נצמדית לצד הימני.

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

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

לדוגמה:

<body>
  <header>Site Header</header>
  <main>Page content</main>
  <footer>Site Footer</footer>
</body>
body {
  display: flex;
  flex-direction: column;
  justify-items: flex-start;
  min-height: 100dvh;
}

footer {
  margin-top: auto;
}