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
<!DOCTYPE html> <html> <head> </head> <body> <h1>The flex-direction Property</h1> <p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p> <div class="flex-container"> <div class="one">1</div> <div class="two">2</div> </div> <div class="flex-container"> <div class="three">3</div> <div class="four">4</div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.flex-container { display: flex; flex-direction: row; background-color: DodgerBlue; justify-content: space-between; } div.one { background-color: #f1f1f1; width: 30%; margin: 10px; float:left; line-height: 75px; font-size: 30px; text-align:center; } div.two { background-color: #f1f1f1; width:30%; margin: 10px; line-height: 75px; font-size: 30px; text-align:center; } div.three { background-color: #f1f1f1; width: 30%; margin: 10px; float:left; line-height: 75px; font-size: 30px; text-align:center; } div.four { background-color: #f1f1f1; width:30%; margin: 10px; line-height: 75px; font-size: 30px; text-align:center; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>