FlexBox: How can i keep boxes fixed one below the other - css

Question

I'm trying to create a page using FlexBox so i can keep the main image always centered with the top logo and page. And add of "off-center" text, next to the left.
My problem now is that i cannot make each box (image+text) keep their place vertically, boxes float and they have different space between each other based on what i'm using to view (big screen, laptop).
Not an expert with FlexBox, can i do that?
And also, i want to add a bar after the third box, 100% width...but it's placing in the middle of the page, between the boxes.
Any help will be welcome and i'll keep learning :)
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
}
.top {
border: 1px solid white;
width: 50%;
height: 10%;
align-self: flex-start;
text-align: center;
}
.inner-container {
border: 1px solid white;
width: 50%;
height: 60%;
display: flex;
}
.center {
position: absolute;
width: 50%;
text-align: left;
align-self: flex-end;
}
.off-center {
position: absolute;
vertical-align: bottom;
text-transform: uppercase;
padding-left: 10px;
min-width: 200px;
align-self: flex-end;
}
.center, .off-center {
position: absolute;
}
.center img {width: 100%;}
.off-center h2 {font-size:12px; font-family: 'Open Sans', sans-serif; font-weight: 400;text-transform: uppercase; color:black; display: block!important;margin: 0px;}
.off-center p {font-size: 20px; font-family:'aileronbold', sans-serif; display: block!important;margin: 0px;text-transform: none;}
.row.subscriptionBar {display:flex; background-color: black; display: block; padding:20px;}
.subscriptionBar h2 {color:white;}
.firstPart {display: }
#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p></div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p></div>
</div>
</div>

Answer 1

.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
header{
background: tomato;
}
section{
display: flex
}
.main {
background: deepskyblue;
}
.main img{
max-width: 100%;
}
.full-width {
background: lightgreen;
}
.main { order: 2; flex: 3 0px; }
.aside { flex: 1 auto; }
.aside-1 { order: 1; background: gold; width: 10%}
.aside-2 { order: 3; background: hotpink; position: relative; width: 10%}
.aside-2 > span {
position: absolute;
bottom: 0;
left: 0;
}
.vertical {
width: 15%; /* Modify this value for different screen size*/
}
/* .full-width { order: 4; } */
/*#media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
#media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}*/
body {
padding: 2em;
}
<div class="wrapper">
<header><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></header>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="https://picsum.photos/200/300" alt="">
</div>
<aside class="aside aside-1 vertical"></aside>
<aside class="aside aside-2 vertical"><span>Aside Right</span></aside>
</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
<section class="full-width">Full Width</section>
<section>
<div class="main">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<aside class="aside aside-1"></aside>
<aside class="aside aside-2"><span>Aside Right</span></aside>
</section>
</div>
I'm just doing a quick sample because it's not clear on what you're looking for. If this is the direction you're hoping to move toward, then I may be able to assist further.

Answer 2

You just have a few too many things going on with your combination of flexbox and absolute positioning. Below is a version of your snippet with much of the unnecessary css commented out (so you can see exactly what it is) plus a couple of new additions.
Most important changes other than removing some of the absolute positioning are removing flex-wrap from your .container and adding flex-direction: column as well as matching the widths of .center and .off-center so you can use position: absolute on .off-center (good use of it in that case) along with margin-left equivalent to the width to ensure that it is positioned just to the right of your image container.
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
/*justify-content: center;
flex-wrap: wrap;
height: 100vh;*/
}
.top {
border: 1px solid white;
/*width: 50%;*/
height: 10%;
/*align-self: flex-start;*/
text-align: center;
}
.inner-container {
border: 1px solid white;
/*width: 50%;*/
height: 60%;
display: flex;
justify-content: space-around;
}
.center {
/*position: absolute;*/
width: 50%;
min-width: 200px;
text-align: left;
/*align-self: flex-end;*/
}
.off-center {
position: absolute;
/*vertical-align: bottom;*/
text-transform: uppercase;
padding-left: 10px;
width: 50%;
min-width: 200px;
align-self: flex-end;
margin-left: 50%;
}
/*.center, .off-center {
position: absolute;
}*/
.center img {
width: 100%;
}
.off-center h2 {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: black;
display: block!important;
margin: 0px;
}
.off-center p {
font-size: 20px;
font-family: 'aileronbold', sans-serif;
display: block!important;
margin: 0px;
text-transform: none;
}
.row.subscriptionBar {
display: flex;
background-color: black;
display: block;
padding: 20px;
}
.subscriptionBar h2 {
color: white;
}
.firstPart {
display:
}
/*#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 105px;
}
}*/
<div class="container">
<div class="top"><img src="https://www.oilandgasreinvented.com/img/logo-placeholder.svg" width="80px"></div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt="">
</div>
<div class="off-center">
<h2 class="">ArtistName 1</h2>
<p>509476ZclHtqXy</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 2</h2>
<p>Title lala 1</p>
</div>
</div>
<div class="inner-container">
<div class="center">
<img src="http://hdimages.org/wp-content/uploads/2017/03/placeholder-image1.gif" alt=""></div>
<div class="off-center">
<h2 class="">ArtistName 3 444</h2>
<p>Title 093830</p>
</div>
</div>
</div>