Trying to learn Flexbox, So if I wanted something vertically and horizontally center aligned but I also wanted something else within the parent element to be aligned to the top left corner of the page, would I use two containers or is there a way to vertically and horizontally align child elements? I'm so confused.
I appreciate any replies.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Elements Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/hover.css" type="text/css">
</head>
<body>
<div class='container'>
<div class='content'>
<img alt="" width="400" src="image/box1.svg" class="button hvr-grow">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
body{
background-color: azure;
background-size: cover;
height:100vh;
}
.container{
display: flex;
flex-direction: column;
min-height:100vh;
justify-content: center;
align-items: center;
}
.content{
}
.boxorange{
}
