Mérei Tamás webdesigner

A flexbox model

Szerző:   |   2014-07-17

A layout tervezésre a CSS3-ban új eszközök állnak rendelkezésre. Mint a neve mutatja illetve a videóból is látszik, flexibilis, hatékony és egyszerűen használható. Sajnos a modern böngészők között is akad olyan amelyik csak részlegesen támogatja. Ahhoz, hogy élesben is biztonsággal tudjuk használni még várni kell, de addig is mindenképpen érdemes megismerkedni vele.

A működő kódot ide kattintva tudod megnézni.

Videó

HTML forráskód


<html>
<head>
	<title>Flexbox</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<script src="jquery.js"></script>
	<script src="script.js"></script>
</head>
<body>

	<section>

		<article>
			<header>1. box</header>
			<ul>
				<li>Lorem ipsum dolor sit amet</li>
				<li>consectetur adipiscing elit</li>
				<li>Morbi viverra libero quam</li>
				<li>eu interdum quam mattis a</li>
				<li>Vivamus ipsum felis, consequat</li>
				<li class="more">non blandit id, volutpat ut justo</li>
				<li class="more">Pellentesque at dolor dolor</li>
				<li class="more">Nunc eu sapien consequat</li>
				<li class="more">tempor odio sit amet</li>
				<li class="more">egestas ligula donec molestie</li>
			</ul>
			<p class="more-items">Tovább »</p>
		</article>
		<article>
			<header>2. box</header>
			<ul>
				<li>non blandit id, volutpat ut justo tempor odio</li>
				<li>Pellentesque at dolor dolor</li>
				<li>Nunc eu sapien consequat ligula donec molestie</li>
				<li>tempor odio sit amet</li>
				<li>egestas ligula donec molestie</li>
				<li class="more">non blandit id, volutpat ut justo</li>
				<li class="more">Pellentesque at dolor dolor</li>
				<li class="more">Nunc eu sapien consequat</li>
				<li class="more">tempor odio sit amet</li>
				<li class="more">egestas ligula donec molestie</li>
			</ul>
			<p class="more-items">Tovább »</p>
		</article>
		<article>
			<header>3. box</header>
			<ul>
				<li>dictum ante et molestie</li>
				<li>aliquam pulvinar sed elit</li>
				<li>sed aliquet cras lacinia</li>
				<li>vitae tortor nec aliquam</li>
				<li>sed odio elit, ullamcorper</li>
				<li class="more">non blandit id, volutpat ut justo</li>
				<li class="more">Pellentesque at dolor dolor</li>
				<li class="more">Nunc eu sapien consequat</li>
				<li class="more">tempor odio sit amet</li>
				<li class="more">egestas ligula donec molestie</li>
			</ul>
			<p class="more-items">Tovább »</p>
		</article>
		<article>
			<header>4. box</header>
			<ul>
				<li>dictum ante et molestie</li>
				<li>aliquam pulvinar sed elit</li>
				<li>sed aliquet cras lacinia</li>
				<li class="more">non blandit id, volutpat ut justo</li>
				<li class="more">Pellentesque at dolor dolor</li>
				<li class="more">Nunc eu sapien consequat</li>
				<li class="more">tempor odio sit amet</li>
				<li class="more">egestas ligula donec molestie</li>
			</ul>
			<p class="more-items">Tovább »</p>
		</article>
		<article>
			<header>5. box</header>
			<ul>
				<li>dictum ante et molestie vitae tortor </li>
				<li>aliquam pulvinar sed elit</li>
				<li>sed aliquet cras lacinia tortor nec aliquam</li>
				<li>vitae tortor nec aliquam</li>
				<li>sed odio elit, ullamcorper sed odio elit</li>
				<li class="more">non blandit id, volutpat ut justo</li>
				<li class="more">Pellentesque at dolor dolor</li>
				<li class="more">Nunc eu sapien consequat</li>
				<li class="more">tempor odio sit amet</li>
				<li class="more">egestas ligula donec molestie</li>
			</ul>
			<p class="more-items">Tovább »</p>
		</article>

	</section>

</body>
</html>

CSS forráskód


* { padding:0;margin:0;border:0;font-family:Roboto;font-size:14px }
body {
	background: #f8f8f8;
	color: #9c9c9c;
	margin: 5px
}
section {
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: space-around;
	margin: 0 auto;
}
article {
	margin: 5px;
	background: #e8e8e8;
	flex: 1 1 100px; /* flex-grow | flex-shrink | flex-basis */
}
article header {
	padding: 10px;
	background: #2eec71;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
}

article:nth-of-type(1) { order: 3 }
article:nth-of-type(2) { order: 2 }
article:nth-of-type(3) { order: 5 }
article:nth-of-type(4) { order: 1 }
article:nth-of-type(5) { order: 4 }

article:nth-of-type(2) header { background:#f1b14f }
article:nth-of-type(3) header { background:#514f67 }
article:nth-of-type(4) header { background:#fbca01 }
article:nth-of-type(5) header { background:#2d5d8e }

ul { padding: 0 10px }
li { list-style: none; padding: 10px 0; border-bottom: 1px solid #c9c9c9 }
li.more { display: none }

p.more-items { padding: 20px 0 10px 10px; font-style: italic; cursor: pointer }

@media all and (max-width:500px) {
	section {
		flex-flow: column wrap;
	}
	article {
		flex-basis: initial;
	}
}

jQuery forráskód


$(document).ready(function() {
	$(".more-items").click(function(){
		$(this).parent().find(".more").slideToggle();
	});
});

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

10 hozzászólás

  1. Farkas Tibor
    2017. április 10. hétfő - 05:14

    Szia Tamás
    Nagyon jók a videóid és a blogod sokat tanulok belőle köszönet érte .
    Azt szeretném megtudni te milyen eszközzel vagy módszerrel ellenőrződ le azt, hogy minden
    méretben (Mobil, Tablet ,Desktop) megfelelően működik .
    Válaszodat megköszönve további sok sikert az oldal és a videó készítéshez.

    Üdvözlettel:

    Tibor

    • cyrex
      2017. április 10. hétfő - 07:10

      Kétféle android-os tablet, ipad, négyféle android-os mobil, iphone 5, iphone 6, kétféle PC és imac. Ezeken szoktam kipróbálni.

  2. Hankó Zoltán
    2017. január 7. szombat - 17:30

    Szia,

    Szerinted most már (2017-ben) érdemes flexbox-al indítani egy új projektet?

    • cyrex
      2017. január 21. szombat - 21:21

      Persze, a Bootstrap 4 is támogatni fogja már a flexboxot. A natív CSS grid még elég kísérleti stádiumban van, addig marad a flexbox.

  3. Kustár Éva
    2014. december 8. hétfő - 16:22

    Kedves Tamás!

    Készítettem egy weboldalt a flexbox videód, és más leírások alapján, de akadt egy kis problémám.

    A navigáció alatti “Hasznos linkek”-et szeretném úgy elhelyezni, hogy mobil nézetben alulra kerüljön, de bárhogy próbálkozom, nem sikerül.

    Tudnál tanácsot adni, hogyan oldható ez meg?
    Segítséged előre is köszönöm!

    Üdvözlettel:

    Éva

    • Mérei Tamás
      2014. december 31. szerda - 10:39

      Próbáld ki a Bootstrap-et, találsz róla anyagot az oldalon.

  4. Norbert
    2014. szeptember 7. vasárnap - 17:19

    Hello!

    Az lenne a kérdésem, hogy hol tudom keresni az újításokat, HTML és CSS érdekelne a legjobban.

    • cyrex
      2014. szeptember 14. vasárnap - 13:33

      Olvass szakmai blogokat, mint pl. ez is 🙂 Külföldön is vannak jó oldalak, pl a webdesignerdepot.com

  5. Norbert
    2014. július 24. csütörtök - 23:00

    Mobil optimalizálás nagyrészt pipa 🙂

  6. Polgár Tamás
    2014. július 17. csütörtök - 23:48

    Nagyon szépen köszönöm a feltöltést, már vártam a videót! 🙂

Hozzászólás

Legújabb hozzászólások