justify-content
שיעור 7 מתוך 15 בקורס CSS Flexbox - הקורס המלא של Coddy.
המאפיין justify-content מגדיר את היישור לאורך הציר הראשי.
הציר הראשי אופקי עבור כיוון שורה ואנכי עבור כיוון עמודה.
הוא מקבל שישה ערכים:
flex-start- מיישר את הפריטים לתחילת המכולה.flex-end- מיישר את הפריטים לסוף המכולה.center- מיישר את הפריטים למרכז המכולה.space-between- הפריטים מפוזרים באופן שווה לאורך הציר. הפריט הראשון נמצא בתחילת הציר, והאחרון בסופו.space-around- הפריטים מפוזרים באופן שווה לאורך הציר, עם רווח שווה סביבם.space-evenly- הפריטים מפוזרים כך שהמרווח בין כל שני פריטים (והמרווח עד לקצוות) שווה.
ערך ברירת המחדל של מכולת flex הוא flex-start.
לדוגמה,
.container {
display: flex;
justify-content: flex-end;
}
אתגר
קלהגדר את היישור לאורך הציר הראשי של ה-flexbox הנתון לערך space-between.
כדאי לך לנסות את כל הערכים!
נסו בעצמכם
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>כל השיעורים ביחידה CSS Flexbox - הקורס המלא
2קונטיינר Flex
Flexboxflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgapמרכוז מושלםתרגלו בעצמכם: Web אונליין