I have an issue with flexbox. So at first I had only two images(without the divs) in a flexbox but I was facing the problem where the images would share one row when I wanted to force two rows, so then I decided to put two divs in whose parent's property was .left div { flex: 1 100% } because I wanted to force them to share their own row, but then I realized that this may have undermined justify-content? Because when I did justify-content: center or justify-content: space-around, nothing changed; I assumed this was because of the flex basis. So the question is how do I force my images(which are still in divs) to be on separate rows and also be able to freely adjust justify-content to whatever attribute I want. From doing it myself just now I think I made it so that the divs are on separate rows(which is what I want), but the only issue now is trying to do justify-content and be able to move the left image; also this issue is occurring regardless of the media query. The rule change is also located at the bottom rule in each media query.
-Thanks
.left {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
order: 1;
width: 45%;
}
.middle {
display: flex;
flex-flow: column wrap;
order: 2;
width: 45%;
height: 100%;
}
.container {
display: flex;
position: relative;
flex-wrap: row wrap;
justify-content: space-around;
align-items: stretch;
min-height: 70vh;
width: 70%;
margin: 5% auto 8% auto;
background-color: white;
}
.container p {
margin-bottom: 12%;
}
@media all and (max-width: 1000px) {
#nav {
flex-direction: column; /*updated*/
margin-bottom: 7%;
}
#nav ul {
padding-left: 0; /*added*/
}
#nav li {
flex: 1 1 100%; /*updated*/
padding: 5px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#nav li a{
text-align: center;
padding: 5px;
margin: 5px;
}
#bigwrap {
width: 100%;
}
.container {
flex-flow: row wrap;
min-height: 100vh;
width: 100%;
}
.left, .right {
flex: 1 100%;
}
.middle {
flex-flow: row wrap;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
}
.box {
width: 70%;
text-align: center;
}
#header2{
justify-content: space-around;
}
.left {
justify-content: center;
}
.left div {
flex: 1 50%;
}
}
@media (min-width: 1000px) and (max-width: 1300px) {
.container {
width: 90%;
}
.left div {
flex: 1 100%;
}
}<div class="container">
<div class="left">
<div>
<img src="corn.jpg" alt="Picture of kid">
</div>
<div>
<img src="acorns.jpg" alt="Picture of kid">
</div>
</div>
<div class="middle">
<div class="box">
<h2> Acorns </h2>
</div>
<div class="box2">
<p>This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence.</p>
</div>
<div class="box">
<p>This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. </p>
</div>
<div class="box">
<p>This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence. This is a sample sentence.
This is a sample sentence. This is a sample sentence. This is a sample sentence.</p>
</div>
</div>
-Thanks
