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();
	});
});

12 hozzászólás

  1. 2018. január 20. szombat - 16:16

    Szia Tamás,

    A video alapján én is megcsináltam a 3 file-t, de sajnos van ami nem működik.

    Valamiért nem érzékeli a style.css-ben legelső 2 sorban megadott beállításokat se a Firefox sem a Chrome. Marad az alap betűtípus és padding.
    A tovább >> javascript-re kattintva nem nyitja le a more sorokat egyik böngészőm sem (javascript használata engedélyezve van)
    Próbáltam úgy is hogy az oldaladon lévő kódokat copy-paste-eltem be notepadba de úgysem működik eza 2 dolog valamiért. Van esetleg ötleted?

    MÁS:
    Mikor kell div-et használni és mikor section/article-t? Van erről valami leírás esetleg? A html-css-az-alapoktol és a Bootstrap-es videodban div-eztél, a responsive web designos videoban és ebben meg section/article van ismét.

    köszönettel:

    Tibor

    • 2018. január 20. szombat - 18:14

      A jquery hiányzik valószínűleg, azért nem nyitja le nálad. A betűtípusnál ugyanez, a Google fonts hivatkozás hiányzik gondolom.

      A DIV, SECTION és ARTICLE is block típusú elemek, tehát pontosan ugyanúgy működnek. Szemantikai különbségek vannak. A forráskóddal utalni tudsz egy adott tartalom fajtájára. Pl. egy cikknek a szövegét ARTICLE tag-ek közé szoktuk tenni. A navigációt NAV tag-ek közé, a fejlécet HEADER, a láblécet FOOTER, a dátumot TIME tagek közé stb. De akkor sem történik tragédia, ha kizárólag DIV-eket használsz mindenhol.

  2. 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

    • 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.

  3. 2017. január 7. szombat - 17:30

    Szia,

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

    • 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.

  4. 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

    • 2014. december 31. szerda - 10:39

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

  5. 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.

    • 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

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

    Mobil optimalizálás nagyrészt pipa 🙂

  7. 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

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A Bootstrap 4 grid használata

    100% magasságot kell adni a bal oszlopnak....

  • WordPress sablon készítés

    Ne plugint használj, hanem írd bele a header.php-ba....

  • WordPress sablon készítés

    Hali. Beállítottam egy fav icont a weboldalamra, viszont nem látszik egyáltalán, csak akkor ha a WordPress adminjában vagyok. Szerinted ez miért van? ...

  • A Bootstrap 4 grid használata

    Hali. Nekem egy bootstrap 4-et használó oldalon van egy sorom, amiben van két oszlop. A bal oldali oszlopban van egy h2-es címsor, és két bekezdés. A ...

  • Az Advanced Custom Fields plugin használata

    Persze, a wysiwyg szerkesztővel tudsz videót is beszúrni....

  • Az Advanced Custom Fields plugin használata

    Ezzel a pluginnal youtube videót lehet beszúrni ugyanígy mint képet? Mert én nem tudtam igazán rájönni mit kéne kiválasztanom ehhez....

  • Bootstrap 4 setup

    Shift + Tab...

  • Bootstrap 4 setup

    Hali. Hogy csinálod azt a videókban, hogy egyszerre törölsz több sor tabulátorát is? Hogy kijelölsz egy részt és azok mögül mind törölsz tabulátort eg...

  • Dia szkennelés házilag

    Örülök, hogy segített az írás....

  • Dia szkennelés házilag

    Nagyon szépen köszönöm, hogy leírta próbálkozásait, mert engem is gondolkodásra késztetett. Több száz diaképem van, de én sem akartam kisebb vagyont k...

  • Adobe XD VS. Lunacy

    Ez egy lebutított vektorgrafikus rajzolóprogram, semmi több. Ha az alkalmazásod / weboldalad tartalmaz raszteres elemeket, azokat PS-ben kell külön le...

  • Adobe XD VS. Lunacy

    Szerintem (ez csak az én meglátásom) az XD inkább csak mobil alkalmazás fejlesztésére van. Nem igazán látom azokat a funkciókat benne amiket PS-ben. N...