flex box example

פלקס בוקס – פריסה רספונסיבית



שתפו את הפוסט

בשנים האחרונות הדרישה לאתרים רספונסיביים עולה באופן טיבעי. האמת היא שזה גורם ללא מעט כאבי ראש לבוני אתרים וממשקים. מערכות כמו Bootstrap ואחרות מאפשרות לעשות זאת במהירות יחסית אבל עדיין העימוד נעשה בעזרת חוקי css שלא באו לעולם על מנת לעמד דפי רשת, כמו floats. עתה, יש לנו סט כלים שלם שמאפשר עבודה נוחה למדי. סט הכלים נקרא flex box. ועל זה המדריך.

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

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

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

#wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}

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

בשלב הבא של הhtml שלי יש לי תמונה ותפריט:

 <header>
 	<img src="images/hero-header-image.jpg" class="img-responsive img-thumbnail">
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".togglenav").on("click",function(e){
			$("nav ul").slideToggle("slow");
		});
	});	
</script>
	<nav>
	<a href="#" class="togglenav">Menu</a>
		<ul>
			<li><a href="#">one</a></li>
			<li><a href="#">two</a></li>
			<li><a href="#">three</a></li>
			<li><a href="#">four</a></li>
			<li><a href="#">five</a></li>
			<li><a href="#">six</a></li>
		</ul>
	</nav>

 </header>

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

header{
	width: 100%;
	display: flex;
	flex-direction: column;
}

header > *{
	order: 9999;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	background-color: red;
}

nav ul li{
	flex:1;
	background-color: #ccc;
}

nav ul li a{
	color: white;
	font-weight: 100;
	letter-spacing: 2px;
	text-decoration: none;
	background: rgba(0,0,0,0.2);
	padding: 20px 5px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

למשל, הרשימה של התפריט מוכרזת גם היא כפלקס, על מנת שנוכל לארגן את פירטי הרשימה. שימו לב שפרטי הרשימה (li) מקבל משהו שנקרא: flex:1. זה קיצור שאומר כמה רוחב וגובה יקבל האלמנט. פלקס יחשב אוטומטים את הדברים. אבל אם אנחנו רוצים לשלוט לחלוטין בעניין יש לכתוב את הגירסה המלאה: flex: 1 1 33.33%.

זו דוגמה. ה1 הראשון אומר איך למלא את הרווח אופקית, ה1 השני אומר איך למצא את הרווח אנכית, והמספר אומר מהו רוחב הבסיס שאנחנו רוצים לאלמנט. למעשה ניתן גם לכתוב: flex-grow:1;flex-shrink:1;flex-basis:33.33%. אבל חייבים להודות שהכתיבה המקוצרת נקיה יותר, ובעיקר לרוב זה מה שנצטרך.

אם שמתם לב אני גם מתייחס לסדר האלמנטים אבל על כך בהמשך.

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

section#thecontent{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background-color: #fff;
	width: 95%;
	margin: 0 auto;
}

#bigsectionone{
	margin: 2em 0;
	padding: 2em 0;
	background-color: #eecc88;
}

#bigsectionone form{
	display: flex;
	justify-content: center;
	align-items: center;

}

שימו לב לjustify-content. בעזרת הוראה זו אנחנו אומרים לילדים איך להתארגן בציר המרכזי. ברירת המחדל היא: flex-start, כלומר אופקית עם כיוון הדף.flex-end הופך את הכיוון, center כמובן ממרכז את הילדים, space-between מרווח את הילדים אוטומטית על שטח ההורה, space-around מרווח הילדים על פני השטח של ההורה אבל גם משאיר רווח לילדים בצדדים.

יש גם align-content. ויש גם align-items. הפשרויות שלהן דומות רק שהן מתייחסות לציר האנכי.למשל אתם רואים שאת הטופס מיקמתי במרכז האופקי ובמרכז האנכי.

#bigsectiontwo{
	display: flex;
	justify-content: space-around;
}


aside{
	order: 2;
	flex-basis:350px;
	display: flex;
	flex-direction: column;
	background-color: #eeff88;
}

aside > div{
	border: 1px solid #ccc;
	margin: 10px 0;
}

article{
	order: 1;
	flex-basis: 800px;
	background-color: #22ee77;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

article #sectionone{
	background-color: yellow;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
article #sectionone > div{
	border: 1px solid red;
	flex:0 0 43.33%;
	margin: 1em;
}




article #sectiontwo{
	background-color: #33ffee;
	display: flex;
}

article #sectiontwo > div{
	background-color: green;
	border: 1px solid white;
	flex:1;
}

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

כמו כן, שימו לב שכדי ליצור גריד השתמשתי אך ורק בשתי הוראות: flex-wrap: wrap;
justify-content: space-between;

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

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

ועכשיו כל הcss, כולל המדיה קוויריס:

body{
	background-image: linear-gradient(260deg,#2376ae 0%,#c16ecf 100%);
}
h4{
	text-align: center;
	border-bottom: 1px dashed #FFF;
	color: #333;
}

p{
	padding: 1em;
}


#wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}

#wrapper > *{
	order:9999;
}

header{
	width: 100%;
	display: flex;
	flex-direction: column;
}

header > *{
	order: 9999;
}

nav{

}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	background-color: red;
}

nav ul li{
	flex:1;
	background-color: #ccc;
}

nav ul li a{
	color: white;
	font-weight: 100;
	letter-spacing: 2px;
	text-decoration: none;
	background: rgba(0,0,0,0.2);
	padding: 20px 5px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.togglenav{
	display: none;
}

section#thecontent{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background-color: #fff;
	width: 95%;
	margin: 0 auto;
}

#bigsectionone{
	margin: 2em 0;
	padding: 2em 0;
	background-color: #eecc88;
}

#bigsectionone form{
	display: flex;
	justify-content: center;
	align-items: center;

}

#bigsectionone form > * {
	padding: 0.5em;
}

#inputtext{
	order: 2;
	flex-basis: 350px;
}
#formbtn{
	order: 1;
}

#bigsectiontwo{
	display: flex;
	justify-content: space-around;

}


aside{
	order: 2;
	flex-basis:350px;
	display: flex;
	flex-direction: column;
	background-color: #eeff88;
}

aside > div{
	border: 1px solid #ccc;
	margin: 10px 0;
}

article{
	order: 1;
	flex-basis: 800px;
	background-color: #22ee77;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

article #sectionone{
	background-color: yellow;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
article #sectionone > div{
	border: 1px solid red;
	flex:0 0 43.33%;
	margin: 1em;
}




article #sectiontwo{
	background-color: #33ffee;
	display: flex;
}

article #sectiontwo > div{
	background-color: green;
	border: 1px solid white;
	flex:1;
}


section#therfooter{
	display: flex;
	justify-content: space-around;
	background-color: #666;
	width: 95%;
	margin: 0 auto;
}

section#therfooter > div{
	flex-basis: 300px;
}


@media all and (max-width:1000px) {

	#inputtext{
		flex: 1;
	}

	article #sectionone > div{
		flex:1;

	}

}

@media all and (max-width:500px) {

	#wrapper{
		width: 95%;
	}

	header img{
		order: 2;
	}

	header nav{
		order: 1;
	}

	nav ul{
		flex-wrap: wrap;
		display: none;
	}
	

	nav ul li{
		flex-basis: 100%;
	}

	.togglenav{
		display: block;
	}

	section#thecontent{
		flex-direction: column;
	}

	article #sectionone,article #sectiontwo,section#therfooter{
		flex-direction: column;
	}

	article #sectionone > div{
		margin: 0.2em;
	}

	#bigsectiontwo{
		flex-direction: column;
	}



	#bigsectionone form{
		flex-direction: column;
		justify-content: unset;
		align-items: unset;
	}

	#inputtext{
		order: 1;
		flex-basis: 100%;
	}
	#formbtn{
		order: 2;
		flex-basis: 100%;
	}


}

 

ראו דמו

 

שתפו אותי


אולי גם תרצו לקרוא את המאמרים הבאים



שתפו את הפוסט

אולי יעניין אתכם לקרוא גם:


תגובה אחת על “פלקס בוקס – פריסה רספונסיבית”

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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