<ul class="flex-container1">
	       <li class="item" id="item1"><img src="Foto yo/yo.jpg" " alt="50" width="85vw" height="50vh"><br><b>texto/ texto <dd> texto <dd> texto </b></li>
	       <li class="item" id="item2"><b><center><br> texto <br> texto <br> texto </b></center></li>                      
           <li class="item" id="item3">3</li> 
 
	       <li class="item" id="item4"><iframe width="330" height="190" src="Fotos.html" scrolling="no" frameborder="no"></iframe></li>
	       <li class="item" id="item5"><center><br><iframe width="50%" height="30%" src="Hoja1.html" scrolling="no" frameborder="no"></iframe></center></li>        
	       <li class="item" id="item6">6</li>
	       <li class="item" id="item7">7</li>
	       <li class="item" id="item8">8</li>
           <li class="item" id="item9">9</li>
           <li class="item" id="item10">10</li>
           <li class="item" id="item11">11</li>
           <li class="item" id="item12">12</li>
</ul> 
 

*{
	margin:0px;/*distaancia desde el alto de web este codigo no es original lo he puesto yo margin:80px;*/		
}
 
.flex-container1{	
    width:100%; /* width:90%; */
    max-width:auto; /* max-width:960px; */    
    list-style-type:none;
    margin:0px auto; /*  margin:20px auto; */
    padding:0;
    background-color:midnightblue; /*  background-color:midnightblue; */   
    /*Flexbox setup*/
    display:flex;
    flex-flow:row wrap;
    justify-content:center;/*poner los cuadros a la izquierda del padre justify-content: flex-start; centrado center;*/
	align-items:center; /*este codigo y el de abajo es para meter varios textos en el cuadro con <br> */ 
    align-content:stretch; /*este codigo y el de arriba es para meter varios textos en el cuadro con <br> */
}
.item{
    height:190px; /* altura cuadro height:210px; */
    width:330px; /*ancho width:290px; */
    line-height:20px; /*distancia en alto del contenido del cuadro 40px*/
    font-size:13px; /*tamaño del contenido del cuadro*/
    background-color:steelblue; /*color fondo cuadro background-color:steelblue*/
    color:#fff; /*color:#fff; contenido del cuadro*/
    text-align:center; /*ajustar a derecha izquierda o centro el contenido del cuadro left*/
    margin:2px 2px; /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/ 
}
 
/* ordenar posicion de item*/
#item1{
	order:1;
}
 
#item2{
	order:4;
}
 
#item3{
	order:5;
}
 
 
#item4{
	order:2;
} 
 
#item5{
	order:3;
} 
 
#item6{
	order:6;
}
 
#item7{
	order:7;
}
 
#item8{
	order:8;
}
 
 
#item9{
	order:9;
} 
 
#item10{
	order:10;
} 
 
#item11{
	order:11;
} 
 
#item12{
	order:12;
}