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