Show sourcecode
The following files exists in this folder. Click to view.
public_html/gamla-kurser/webbutv1/ovningar/
baskod.html
bentogrid.html
bilder/
css/
gimp_logga.html
index.html
js/
meny1/
meny2/
ovning-flexbox.html
ovning0.html
ovning00.html
ovning1.html
ovning10.html
ovning11.html
ovning12.html
ovning2.html
ovning3.html
ovning4.html
ovning5.html
ovning6.html
ovning6b.html
ovning7.html
ovning8a.html
ovning8b.html
ovning9a.html
ovning9b.html
ovning9c.html
ovning9d.html
sida2.html
ovning-flexbox.html
92 lines UTF-8 Windows (CRLF)
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Övning Flexbox</title>
<link rel="stylesheet" href="./css/css_ovning-flexbox.css">
</head>
<body>
<h1>A) Centrera den vita rutan i den gröna rutan.</h1>
<div class="flexbox1">
<img class="kanin-flexbox1" src="./bilder/kanin.png" alt="kanin">
</div>
<h1>B) Styr de blå (eller alla) rutorna till botten och sen styr den röda till toppen.</h1>
<div class="flexbox2">
<div class="box">
<img class="apa1-flexbox2" src="./bilder/apa.jpg" alt="apa1">
</div>
<div class="box">
<img class="krokodil-flexbox2" src="./bilder/krokodil.jpg" alt="krokodil">
</div>
<div class="box">
<img class="apa2-flexbox2" src="./bilder/apa.jpg" alt="apa2">
</div>
</div>
<h1>C) Styr så att de blå rutorna kommer under varandra.</h1>
<div class="flexbox3">
<div class="box2">
<img src="./bilder/kanin.png" alt="kanin">
</div>
<div class="box2">
<img src="./bilder/apa.jpg" alt="apa">
</div>
<div class="box2">
<img src="./bilder/krokodil.jpg" alt="krokodil">
</div>
</div>
<h1>D) Styr så rutorna flyter till ny rad om de inte får plats. De blå är 3 gånger så breda. Bakgrunden är vit. Bredden(width) på "containern" är 800px.</h1>
<div class="flexbox4">
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3 spec">
<img src="./bilder/apa.jpg" alt="apa" width="50px" height="71px">
</div>
<div class="red-box3 spec">
<img src="./bilder/apa.jpg" alt="apa" width="50px" height="71px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
<div class="red-box3">
<img src="./bilder/kanin.png" alt="kanin" width="50px" height="50px">
</div>
</div>
</body>
</html>