Ik ben net gestart met flexbox
als een testje probeer ik een num-klavier na te bouwen. meerdere lijnen en kolommen en een paar knoppen dubbel zo lang of breed.
Nu is het me net gelukt in ie(geloof het of niet) maar in al de rest werkt het niet :(
In ie zijn mijn knoppen even bree en lang zoals ik verwacht behalve de 0/.
Echter in chrome, Firefox en edge zijn mijn knoppen niet hoger dan dat ze zouden zijn zonder flex.
Gezien het niet meer dan een test is om alles te begrijpen staat css en html in 1 bestand en hieronder staat alles.
<!DOCTYPE html>
<html>
<head>
<title>num clav</title>
<style type="text/css">
body{
margin-top:20px;
}
*{
box-sizing: border-box;
padding:0;
margin:0;
}
div{
border: 1px solid black;
margin: auto;
text-align:center;
vertical-align:middle;
}
.clav{
display: flex;
height: 550px;
width:450px;
flex-wrap:wrap;
justify-content: flex-end;
flex-direction:row;
}
.c123{
flex:3;
display: flex;
flex-wrap:wrap;
flex-direction: row;
}
.c4{
flex:1 ;
display: flex;
flex-direction: column;
height: auto;
}
.n{
min-width:90px;
flex: 1;
}
.h1{
flex: 1;
}
.h2{
flex: 2;
}
</style>
</head>
<body>
<div class="clav">
<div class="c123">
<div class="n">N</div>
<div class="n">/</div>
<div class="n">*</div>
<div class="n">7</div>
<div class="n">8</div>
<div class="n">9</div>
<div class="n">4</div>
<div class="n">5</div>
<div class="n">6</div>
<div class="n">1</div>
<div class="n">2</div>
<div class="n">3</div>
<div class="n h2">0</div>
<div class="n">.</div>
</div>
<div class="c4">
<div class="h1">-</div>
<div class="h2">+</div>
<div class="h2">E</div>
</div>
</div>
</body>
</html>
w3.org geeft geen fouten
Jan
