<!DOCTYPE html>
<html>
<head>
<title>Flexbox</title>
<meta charset="utf-8">
<style>
#box-container {
background: gray;
display: flex;
height: 100%;
flex-direction: row;
}
#box-1 {
background-color: dodgerblue;
width: 25%;
height: 50%;
}
#box-2 {
background-color: orangered;
width: 25%;
height: 50%;
}
#box-3 {
background-color: violet;
width: 25%;
height: 50%;
}
#box-4 {
background-color: yellow;
width: 25%;
height: 50%;
}
#box-5 {
background-color: green;
width: 25%;
height: 50%;
}
#box-6 {
background-color: black;
width: 25%;
height: 50%;
}
</style>
</head>
<body>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
<div id="box-5"></div>
<div id="box-6"></div>
</div>
</body>
</html>
What do you mean by not working? Can you describe what you expect to see and then tell us what happens instead?
there is nothing on the screen. But I think its because of the “height: 100%” on the box-container selector, If I use percentage it does not work, but if I use px or other just work fine.
Do you know why?
