Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<div class="flex"> <div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, totam.</div> <div class="item">Neque, accusantium, enim dolor nostrum voluptatum ea voluptate. Magni, hic?</div> <div class="item">In, nostrum, voluptatibus sapiente ex fuga alias temporibus delectus eum?</div> <div class="item">Unde, quod ut non dolores quae eius maxime sequi magnam?</div> <div class="item">Quas, necessitatibus et eveniet laboriosam dolores praesentium molestias reiciendis rem.</div> <div class="item">Nobis, eius at odit ducimus ipsum incidunt aut ad obcaecati.</div> <div class="item">Veritatis, quo voluptas tempore ipsum dolores neque corrupti eos nesciunt?</div> <div class="item">Repellat inventore rem odit deleniti laudantium nemo vitae. Esse, eos.</div> <div class="item">Sint, ad praesentium quo perferendis accusantium ipsam ipsa impedit voluptates.</div> <div class="item">Qui, iure dolores consequatur inventore id ab corporis excepturi quia!</div> <div class="item">Vitae nostrum quae minima omnis expedita excepturi nemo dignissimos voluptatibus!</div> <div class="item">Deserunt expedita assumenda quam eum officia quis nesciunt minus. Mollitia.</div> <div class="item">Aperiam, optio molestias perferendis asperiores dolor reprehenderit porro eligendi consequuntur.</div> <div class="item">Asperiores, consequuntur, eligendi quo accusamus libero neque eos dolorem magni.</div> <div class="item">Iusto, atque maiores accusamus impedit porro ex pariatur sint quos!</div> <div class="item">Unde, eaque sequi tempora labore natus eveniet accusantium numquam recusandae.</div> <div class="item">Eaque, a soluta dignissimos doloribus magni suscipit harum veniam nemo.</div> <div class="item">Doloremque voluptatibus deserunt porro assumenda similique consequatur corporis! Eum, ut?</div> <div class="item">Nulla voluptate iusto corporis minus quae enim porro maxime fuga.</div> <div class="item item--last"><h1>Prohození pořadí <code>order</code></h1></div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.flex { display: flex; flex-wrap: wrap } .item { border: 1px solid red; padding: 1em; width: 300px; display: block; flex-grow: 1; order: 2; } .item--last { order: 1; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>