Me tiene locoo…….

trato que en diferentes container con sus item meter hojas html ya creadas.

Este código en este item3 dentro de .flex-container1 tal cual el enlace de hoja html sale otra hoja  html y se deconfigura los enlaces del container2¿??

<ul class="flex-container1">
<li class="item" ID="item3"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
 

.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:flex-start;;/*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:160px; /* altura cuadro height:200px; */
    width:290px; /*ancho width:200px; */
    line-height:40px; /*distancia en alto del contenido del cuadro*/
    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:left; /*ajustar a derecha izquierda o centro el contenido del cuadro*/
    margin:5px 2px; /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/ 
}
 

En esta otra configuracion si consigo lo que quiero,pero cuando lo coloco en el container1 no me va sale otra hoja html que ya esta en container 2 con otro v-item4 :

<ul class="flex-container2">
 <li class="v-item" ID="item5"><img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
 

.flex-container2{	
    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;*/
}
.v-item{
    height:260px; /*  height:200px; */
    width:380px; /* width:200px; */
    line-height:200px; /*distancia en alto del contenido del cuadro*/
    font-size:20px;
    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*/
    margin:5px 2px;  /*25px distancia del ultimo item del cuadro de arriba 2px distancia de cuadros de al lado*/ 
}
 
.flex-container3{	
    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;*/
}
 

 Bueno y aprovecho de paso como puedo cambiar individualmente los  tamaños de los cuadros de los container ¿?????


Salud2.

bueno el container pue es el <ul class="flex-container1">y dentro de este estan varios item o sea <li class="item" ID="item3"> hay 1,2 y 3 ahora,hasta a qui lo entiendes ???
pues en este item3 tengo insertada una foto <img src="Foto eugenio/Eugenio.jpg" " alt="50" width="85vw" height="50vh"><br><iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li> y quiero insertar otra hoja html <iframe width="40%" height="30%" src="Reservar.html" scrolling="no" frameborder="no"></iframe></li>
pues esta hoja no la muestra muestra otra hoja html hoja fotos, hasta a qui lo entiendes ???

El diseño parte de a qui http://www.falconmasters.com/css/guia-flexbox-layouts

no se mas que explicar.

Saludosss.