כניסה

Front End

  • HTML בסיסי
  • תגיות בסיסיות ב-HTML
  • טפסים ב-HTML
  • קצת על HTML5
  • מבוא ל-CSS ושילוב בעמוד שלנו
  • CSS Selectors
  • CSS בסיסי
  • Media Queries
  • Flex Box
  • Grid
  • Bootstrap CSS
  • שלום JavaScript
  • משתנים ב-JavaScript
  • תנאים ב-JavaScript
  • Switch Statement
  • Ternary Operator
  • Loops
    • while
    • do While
    • for
  • Objects
  • for in Loop
  • Arrays
  • for of
  • Scope
  • Functions
  • Events + DOM
  • DOM Access
  • XML & JSON
  • Storages in JavaScript
    • Session Storage
    • Local Storage
    • Cookies
  • inline, anonymous, arrow functions
  • Array Callbacks
  • Exception Handling
  • Sync VS Async
  • Promise Object
  • async-await
  • Strict Mode & IIFE
  • AJAX
  • Complexity
  • שלום TypeScript
    • התקנות
    • פתיחת פרויקט ראשון
  • TypeScript Basics
    • Variables
    • Functions
  • OOP
    • OOP Basic
    • Inheritance
    • Polymorphism
  • שלום React
    • מבוא
    • התקנות
    • פרויקט ראשון
  • CSS Leaking
  • Layout
  • Interpolation
  • Conditional Rendering
  • Lists
  • Events Basics
  • Props
  • State, useState
  • React Hooks
  • useEffect
  • Routing
  • Ajax Requests
  • Route Parameter
  • useForm
  • Redux
  • Authorization & Authentication
  • תהליך הטמעת Auth מלא בפרויקט
  • Interceptors

Back End

  • Node.js
    • מבוא והגדרות
  • Modules
  • Global Object
  • Versioning System
  • Node.js + TypeScript
  • HTTP Protocol
  • Web Service
  • REST API
  • Layered REST API
  • Middleware
  • Error Handling
  • Auth
  • Upload Images
  • Server Images
  • Database
  • שלום MySQL
  • XAMPP
  • Relations
  • phpMyAdmin
  • MySQL Basics
  • Designer
    • Create Relations
  • Insert Data
  • MySQL Common Commands
  • Using MySQL with REST API
  • CORS
  • Project 1

Dev Ops

  • שלום Docker
  • Containers
  • Images
  • Start & Stop
  • Docker Layers
  • yaml
  • Docker Compose
  • Volumes
  • Error Handling
  • Hot Reloading
  • Anonymous volume
  • Packing Full System
  • Introduction to AWS
  • Setting up AWS Account and IAM
  • AWS EC2 (Elastic Compute Cloud)
  • AWS S3 (Simple Storage Service)
  • AWS RDS (Relational Database Service)
  • AWS Lambda
  • AWS API Gateway
  • AWS Elastic Beanstalk
  • AWS CloudFormation
  • AWS DevOps Tools

Flex Box

סידור תוכן באמצעות Flexbox

 

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

 

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

 

איך זה עובד?

 

פלקסבוקס מגדיר את היחס בין אלמנט מיכל (container) לאלמנטים שנמצאים בתוכו. בשלב ראשון אנחנו מגדירים עבור אלמנט מסוים שהוא יהיה Flexbox באמצעות מאפיין display:

				
					#section {
	display: flex;
}

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

 

ניצור דוגמה עם 3 כרטיסים ונראה שבתחילה הכרטיסים יהיו אחד מתחת לשני:

				
					<div class="card">
	<img loading="lazy" decoding="async" src="avatar.png" alt="avatar" style="width:100%">
	<div class="card-content">
		<h4> John Doe </h4>
		<p> Architect & Engineer
	</div>
</div>

בצד ה-CSS נרשום:

				
					.card {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
}
.card-content {
	padding: 2px 16px;
}

נגדיר פלקס: 

				
					.card-container {
	display: flex;
}

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

 

לכל מיכל מסוג Flexbox אנחנו יכולים לקבוע מה יהיה כיוון הסידור. ברירת המחדל היא לסדר את האלמנטים אחד ליד השני (כלומר סידור בשורה), אבל שינוי קטן ב CSS יעזור לנו להחליף את הסידור לעמודה:

				
					#section {
	display: flex;
	flex-direction: column;
}

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

				
					#section {
	display: flex;
	flex-direction: column;
}

@media screen and (max-width: 768) {
	#section {
		flex-direction: row;
		align-items: baseline;
	}
}

 

המאפיין align-items: baseline גורם לכך שכשהכרטיסים מסודרים אחד ליד השני כל כרטיס יקבל את הגובה המדויק של התוכן שלו, במקום ברירת המחדל שהיא לתת לכל כרטיס את הגובה המלא של ה Container (כך שכל הכרטיסים יהיו באותו גובה).




המאפיין Flex

מאפיין נוסף ששווה להכיר בעבודה עם פלקסבוקס הוא המאפיין flex של כל אחד מהילדים. מאפיין זה קובע עבור כל ילד כמה מקום הוא ישמח לקבל אם יש אופציה לקבל קצת יותר. הערך של פלקס הוא מספר ואפשר לחשוב על זה כאילו הקונטיינר מחלק מקום ביחס לפי אותו מספר. כלומר אם יש שני ילדים, לאחד יש פלקס 7 ולשני פלקס 3, הראשון יקבל 70% מהמקום הפנוי והשני יקבל 30%. חלוקת האחוזים והסכימה נעשית בצורה אוטומטית.

 

נראה דוגמה של תוכן מרכזי ותפריט צד (Sidebar):

				
					<div class="container">
	<div class="sidebar">
		<ul class=menu">
			<li> <a href="..."> link #1 </a>
			....
		</ul>
	</div>
<div class="main">
	<p> Main Content </p>
</div>
</div>

בצד ה-CSS:

				
					.container {
	display: flex;
}
.sidebar {
	background:
	Flex: 2
	Height: 100vh // 100% of page
}
.main {
	Flex: 8
}

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

				
					.sidebar {
	..
	min-width: 150px;
	max-width: 250px;

אם נרצה שהתפריט יהיה מצד ימין נוסיף:

				
					.container {
	flex-direction: row-reverse;
}

הישארו מעודכנים

הירשמו לקבלת תוכן איכותי

מעוניין/ת לשמוע עוד באופן פרטי? נשמח לעזור !

השאירו פרטים בתיבה ונחזור אליכם בהקדם!