灵活的基础，证明内容不起作用

Question

我有一个flexbox的问题。所以起初我在flexbox中只有两个图像（没有div）但我遇到的问题是当我想要强制两行时图像会共享一行，所以我决定在其父级中放置两个div＆＃39 ; s属性是.left div {flex：1 100％}因为我想强迫他们分享他们自己的行，但后来我意识到这可能会破坏正当的内容？因为当我确实为内容辩护：中心或辩护 - 内容：空间，没有任何改变;我认为这是因为弹性基础。所以问题是我如何强制我的图像（仍然在div中）在不同的行上，并且能够自由地将对齐内容调整为我想要的任何属性。从我自己做到这一点，我认为我做到这一点，以便div在不同的行（这是我想要的），但现在唯一的问题是尝试做对齐内容，并能够移动左图像;此问题也随着媒体查询而发生。规则更改也位于每个媒体查询的底部规则中。

-Thanks

＆＃13;

＆＃13;

.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%;
	   
   }
  
}

＆＃13;

<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>
        

＆＃13;

＆＃13;

＆＃13;

-Thanks