user7808079
Reputation: 37
CSS - flexbox issue
Hello I am trying to have three groups of three buttons with each group appearing on a separate line, I managed to achieve this by just grouping them up with divs, however when i use flexbox to position the buttons in the center of the page, all the buttons appear on one line. Is there a way i could use flexbox for my positioning and still be able to have the buttons on separate lines?
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
overflow: hidden;
}
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.options a{
color: inherit;
text-decoration: none;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<div class="options">
<div class="one">
<button><a href="#">Maths</a></button>
<button><a href="#">Computer Science</a></button>
<button><a href="#">Physics</a></button>
</div>
<div class="two">
<button><a href="#">Chemistry</a></button>
<button><a href="#">Biology</a></button>
<button><a href="#">Business Studies</a></button>
</div>
<div class="three">
<button><a href="#">Philosophy</a></button>
<button><a href="#">Geography</a></button>
<button><a href="#">History</a></button>
</div>
</div>
</body>
</html>Upvotes: 0
Views: 52
Answers (2)
Eric.C
Reputation: 11
.options{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
exemple : https://www.w3schools.com/cssref/css3_pr_flex-flow.asp
Upvotes: 1
